fullcalendar add tooltip by hover on day - javascript

I'm trying to add tooltip here. I'm using the event datesRender
var fcContent = element.query('.fc-day.fc-widget-content');
fcContent.forEach(function(content) {
content.setAttribute("data-qtip", "Tooltip content");
});
But after clicking on some day the tooltip does not show again. Is there any solution?

Not sure if this solution works with your requirement, but I think the best way could be using a background event. That will work like an annotation but it will not be a tooltip just like a label in the background. Check the documentation below. You can add the title property of the event to show a label in the background.
Background events

Related

Dynamic content changer

I want to create this:
Multi Image Change
If you click on the Color picker Tumbnail("Farbe:"), other Pic will appear in the
"pvImagesContent" section. I tried this on my self:
http://m4terialrmk.bplaced.net/list%20zoomer/demo.html
So far so good but now I cant figure out how to go on? I tried to put the several list zoom control in a div and make one appear and another disappear, but it broke my functionality.
Or must I just change the image path with help of Javascript? If so, I just want to change a section of the img path.
img/red/pic-1.jpg >>will be>> img/blue/pic-1.jpg
You can use the jQuery
$(function() {
$('img').each(function() {
if($(this).attr('src').indexOf('/red/')) ($(this).attr('src')).replace("/red/","/blue/");
});
});

Possible to trigger a Bootstrap Tooltip from a separate elment?

I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?
Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/

HighChart is preventing click event on a parent

I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.
Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.
I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/

Javascript tooltip only appears on second hover

I am using jQuery and Twitter Bootstrap, and want to have a tooltip appear when hovering over a link. However, the tooltip doesn't appear the first time I hover over a link, but if I move the mouse away and back on, it works every time for that link.
I have several of these on the page:
Full Name
I've created a jsFiddle to demonstrate: jsFiddle. Any help would be appreciated - thanks in advance!
What's happening is that you're instantiating the plug-in on the element when you mouseover it the first time, and then the plug-in works as expected on subsequent mouseovers on that element.
Using the configuration suggested in the docs works (see fiddle):
JavaScript:
// tooltip demo
$('div').tooltip({
selector: "a[data-toggle=tooltip]"
})
HTML:
<div style="text-align: center; width: 100%; margin-top: 50px;">
Full Name <p/><p/>
Full Name<p/>
Full Name<p/>
Full Name<p/>
Full Name
</div>
.tooltip() functions initiates the tooltip effect on the link, not show the tooltip
Explanation:
When the $(this).tooltip() is triggered on the first hover, it instantiate the plugin first. Then finally on the second hover you get the tooltip.
Solution:
Add this on your code:
$(function() {
$("a").tooltip();
});
Solution (JSFiddle)
I had the same issue with a tooltip on a button. It turned out that the tooltip didn't show because the button was disabled the first time. There was code FOLLOWING the attempted to show the tooltip that checked some other values and enabled the button. After the first "run" the button was enabled so on the second and subsequent events the tooltip did/does show. I simply moved the "enable" code before the code that attempts to show the tooltip and my problem was solved.
I think it would be cleaner if you let JQuery handle the mouseover event, and put all your codes inside $(document).ready
Similar issues and solution can be found here:
Jquery onmouseover triggers on second event

qTip2 - refresh tooltip while it is active

I'm using qTip2 here, and need the ability to refresh the content of the tooltip while it is still active. The elements with the tooltip have a click event that does some calculations that can change what I want to be displayed in the tooltip.
I have tried calling the 'destroy' method and rebinding the qtip2 after each recalculation, and it works but only after moving the mouse away and bringing it back.
What I want to achieve is to force the currently active tooltip to redraw itself.
If you look in the documentation, there is a "set" method to change the content:
$('.selector').qtip('option', 'content.text', 'new content'); // Preferred
Is that what you're looking for?
Update: After testing out the api options, they seem to not be working properly, but I've found another method - here is a demo - hover over the tip for 1 sec to see it change.
// make sure you target a specific tip
var qapi = $('#tip1').data('qtip'),
newtip = 'new tooltip content'
qapi.options.content.text = newtip; // update content stored in options
qapi.elements.content.text(newtip); // update visible tooltip content
qapi.redraw(); // redraw to adjust tooltip borders

Categories

Resources