JQuery tooltip
How do I make the tooltip turn off and hide when the element gains focus and not show again for the mouse until a blur event occurs.
Expected: Tooltip has a hover delay. In my jsFiddle, dropdown to left, wait for the tooltip to appear, click on the dropdown, the tooltip will disappear, you can hover over other items, these tooltips show if the left Dropbox still has focus, mouse back, popup the prompt is still not displayed.
Not Pending (Permission Requirement): Now click on the run again, click on the same dropdown until a tooltip appears. Save mouse item, tooltip appears - I don't want it to show when the item has focus.
jsFiddle: http://jsfiddle.net/x1Lveooy/9/
$(document).on({
focus: function (e) {
$('.ui-tooltip').hide()
tempTitle = $(this).attr("data-title");
$(this).attr("data-title", "");
//intent, disable tooltip for this element only:
//$(this).tooltip().tooltip('disable');
//This would work if I wrap init in function & call again on blur, but not what I want:
//$(document).tooltip().tooltip('disable');
},
blur: function (e) {
$(this).attr("data-title", tempTitle);
}
}, '.element1, .element2, #box');
UPDATE retry using "setTimeout" instead of "delay" during initTooltip () (I can't cancel the read delay) getting error: http://jsfiddle.net/x1Lveooy/12/
source to share
- $ ('*'). tooltip () instead of $ (document) .tooltip ()
- Use $ (this) .tooltip (). tooltip ('close'); combined with a cleanup attribute and resetting it to blur
Fiddle fixed: http://jsfiddle.net/x1Lveooy/16/
$(document).ready(function () {
//key point in fix: '*' instead of document
initTooltip('*');
});
$(document).on({
focus: function (e) {
$('.ui-tooltip').hide();
tempTitle = $(this).attr("data-title");
$(this).attr("data-title", "");
//key point in fix: close works even if tooltip isn't showing yet
$(this).tooltip().tooltip('close');
},
blur: function (e) {
$(this).attr("data-title", tempTitle);
}
}, '.element1, .element2, #box');
function initTooltip(target) {
$(target).tooltip({
track: true,
content: function () {
return $(this).attr("data-title");
},
show: {
delay: 1500
},
open: function (event, ui) {
setTimeout(function () {
$(ui.tooltip).fadeTo(1000, 0);
}, 5000);
}
});
}
source to share