Javascript tooltip only appears on second hover - javascript

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

Related

fullcalendar add tooltip by hover on day

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

flip image using jquery on button click?

I'm trying to create a simple drag and drop web application using jquery.
everything so far works as it should.
now what I am trying to do is to add a button to the page so when its clicked, it will FLIP the selected image and I am not having any luck with at all.
I have created a jsfiddle so you can see it for yourself: http://jsfiddle.net/7btkn17q/8/
drag and drop a book image onto the box bellow it and click once inside it, and you will see a button appear at the top of it which says flip.
I need to use that button to flip the selected image.
for that I used this:
$('#flip').click(function(e){
if( $(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000');
}
});
but this does not have any affect on the image(s) at all. I know that the code above is not for flipping the image(s). i just created that code as a test to see if I can access the image(s) on button click with no luck.
could someone please advise on this?
EDIT:
EVEN though I thought this would work, it didn't and I am so confused on why it didn't work:
$('#flip').click(function(e){
if($(e.target).closest(".drag").length > 0 ) {
$(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000');
}
});
Second Edit:
I've tried to use the remove() function to see if i could get the img and somewhat I could make it work but similar to the answer bellow, it will remove ALL the img's instead of removing the selected only:
$(e.target).parent().siblings(".drag" ).find(".img" ).remove();
is there any way to apply the CSS or remove() to the selected element only?
When selecting an image, you can set a class to it. Let's add selected to it.
When selecting another image we just remove the selected class from other elements and add it to the one we just selected.
Here's my fiddle
Another problem I noticed, was that you were trying to test this by changing the border of the selected element. When you click the flip button, the image gets unselected and the border is changed to medium none (Remember, firebug/devtools are your friends.).
So I changed it to change the outline css property to see that the button works.
You also might want to update from jQuery 1.6 as the event handling is so much easier with the .on() function.
'.closest()' only travels up the DOM tree; you'll need to do something like this to target the images:
$('#flip').click(function(e){
if( $(e.target).parent().siblings(".drag").length > 0 ) {
$(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000');
}
});
updated jsfiddle: http://jsfiddle.net/7btkn17q/9/

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/

Create a jQuery modal box that appears beside the trigger action

I want a jQuery modal box that appears near or next to the button that triggers it. The box should appear in shape as well as in the following:
It should be height resizeable, so if the content is long, the box will refit.
How can I do this?
The qTip jQuery plugin is pretty good.
http://craigsworks.com/projects/qtip/
I'm not sure if there is one exactly how you want but here is a list of a few that you may be able to modify slightly.
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
This one in particular seems good
http://flowplayer.org/tools/tooltip.html
I don't think there's anything quite like what you're looking for out of the box. However, with a little customization and tweaking, you might be able to get pretty close to your goal.
To use a jQuery modal, simply design your modal div somewhere on your page (I usually do it at the very bottom) and give it an initial sytle of "display: none":
<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;">
<table id="my_table"> .... </table>
</div>
If you design the div correctly, you might be able to create the shape you're looking for.
Then when the button is clicked, call a Javascript function that displays and positions the div:
function openPromotionDialog() {
$("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000});
$("#promotion_dialog").dialog('open');
}
See the jQuery UI Dialog docs for more information. Providing a position parameter to the dialog() method should allow you to place it where you want (you'd need to examine the clicked button to get the positions).

Categories

Resources