We Keep Coding

jQuery UI Tooltip: Close on click on tooltip itself

I have a page with a jQuery UI tooltip that is initially opened and its closing on mouseout event is disabled.
Now, I want the tooltip to close after a user clicks on it itself, not on the element for which the tooltip is shown (as many other answers here).
As one of the possible solutions, I thought I can add a click handler to the tooltip's div and close it from there. But I can't find a standard way to obtain the tooltip's div with the Tooltip widget API or attach the handler in some other way.
Am I on the right track with the approach above? Or how to achieve what I am after in a different way?
JSFiddle illustrating what I have for the moment.

I've found a relatively simple solution without hacking the Tooltip API via attaching a click handler in the tooltip's open event and closing the tooltip there:
$('.first')
.tooltip({
content: 'Click to close',
position: { my: 'left center', at: 'right center' },
items: '*'
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.click(function () {
$element.tooltip('close');
});
},
})
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
JSFiddle

Try this:
$(document).ready(function(){
$('.first')
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' })
.tooltip('open')
.on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
})
// when the tooltip opens (you could also use 'tooltipcreate'), grab some properties and bind a 'click' event handler
.on('tooltipopen', function(e) {
var self = this, // this refers to the element that the tooltip is attached to
$tooltip = $('#' + this.getAttribute('aria-describedby')); // we can get a reference to the tooltip via the `aria-describedby` attribute
// bind a click handler to close the tooltip
$tooltip.on('click', function() {
$(self).tooltip('close');
});
});
});
Updated JSFiddle
jQuery UI Tooltip API

Try this:
$(document).ready(function(){
$('.first').on('mouseout focusout', function(event) {
event.stopImmediatePropagation()
})
.tooltip({ content: 'Click to close', position: { my: 'left center', at: 'right center' }, items: '*' }).tooltip('open');
$( "body" ).delegate( ".ui-tooltip", "click", function() {
$('.first').tooltip('close');
});
});
See fiddle here

Based on Alexes answer if you wanted to close only on hitting "X":
$(".t1").tooltip({
content: "<div><div class='tit'>Some super titlet</div> <div class='x'>x</div><div class='con'>Some content super super long</div></h1>",
disabled: true,
width:550,
tooltipClass: "myClass",
open: function (event, ui) {
var $element = $(event.target);
ui.tooltip.each(function () {
$("div.x",this).click(function () {
$element.tooltip('close');
});
});
},
}).on('mouseout focusout', function(event) {
event.stopImmediatePropagation();
});
$(".tooltip").click(function() {
$(this)
.tooltip("open")
});
See it here: http://jsfiddle.net/analienx/h639vzaw/73/

Open Jquery-ui Tooltip only on click

I've this code
function DrawTipsProgress(postid, ajaxurl) {
var data = {
action: 'ajax_action',
post_id: postid
}
jQuery('#dashicon-' + postid).on("click", function () {
jQuery.post(ajaxurl, data, function(response) {
jQuery('#dashicon-' + postid).tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
content: response
});
jQuery('#dashicon-' + postid).tooltip('open');
});
});
}
On first click, it work as aspected.
If later I try to hover again the button without click it the tooltip popup again, and the click just do the ajax call but doesn't open the tooltip.

The tooltip is triggered on hover. In your code, it is not being bound to the element until the 'click' event occurs, so it's not really the click causing it to display... it's the hover following the click. I believe what you need to do is use enable and disable. Here is an example fiddle.
http://jsfiddle.net/ecropolis/bh4ctmuj/
Anchor text
$('a').tooltip({
position: { my: 'center bottom' , at: 'center top-10' },
tooltipClass: "myclass",
disabled: true,
close: function( event, ui ) {
$(this).tooltip('disable');
/* instead of $(this) you could also use $(event.target) */
}
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});

Popover does not get anchored to the triggering element

So my Twitter Bootstrap popovers seem to be positionally challenged when the triggering element is contained within an element with the style -ms-overflow-y: auto; (a scrollable element within the window).
When the element is scrolled, the popover does not scroll with it.
I would really like the popover to move with the content within this scrollable element. How can I achieve this?
popover code:
$(this).popover({
animation: false,
html: true,
placement: popover.placement || 'auto bottom',
title: popover.title,
content: popover.validationMessage + popover.content,
trigger: 'manual',
container: '.content-panel'
}).click(function (e) {
$('BUTTON[data-toggle="popover"]').each(function (index, element) { $(this).popover('hide'); });
$(this).popover('show');
$('#' + $(this).attr('data-for')).focus();
});
.content-panel is the scrollable element.
fiddle me this, Batman
http://jsfiddle.net/VUZhL/171/
Update
I would like the popover to continue floating overtop the other elements. When using position:relative; on the parent element it contains the popover instead of letting it float over top.
Bad
Good

Parent element (offsetParent) of popover need to not be static, you could postionned it relatively to document:
position: relative;
See jsFiddle
EDIT: for your use case, you could bind onscroll event of container and use following snippet:
SEE jsFiddle
$(function () {
$('#example').popover();
$('div').on('scroll', function () {
var $container = $(this);
$(this).find('.popover').each(function () {
$(this).css({
top: - $container.scrollTop()
});
});
});
});

For BS 3 and above
you can use container: $(element)
Example:
let elem = $(this)
$(elem).popover({
selector: '[rel=popover]',
trigger: 'hover',
container: $(elem),
placement: 'bottom',
html: true,
content: 'Popover Content'
});

Loading qtip on page load

ive found a script which hope to modify
wish to make the Click FIRST and Click SECOND appear on page load
but still hide when click to other elements within the sets,
need help
$(document).ready(function () {
$('.set').each(function () {
$('a[title]', this).qtip({
position: {
at: 'bottom center',
my: 'top center'
},
show: 'click',
hide: {
event: 'click',
target: $('a[title]', this)
}
});
});
});
http://jsfiddle.net/ADER8/132/
Thanks!

You can simplify your config, you don't need to use an .each to set up qtip, it will use the title of the context anchor. Also, in you fiddle you linked to the nightly build of qtip, which seems very unstable and api shortcuts methods do not seem to be working. After linking to the stable release it is working with the following code:
// Create the tooltips only when document ready
$(document).ready(function () {
// First tooltip config
$('.set a[title]').qtip({
position: {
at: 'bottom center',
my: 'top center'
},
show: 'click',
hide: 'click'
})
.click(function() {
// Hide all tooltips in set except the one that was just clicked
$(this).closest('.set').find('a[title]').not(this).qtip('hide');
});
// Show the first tooltip of each set
$('.set').find('a[title]:first').qtip('show');
});
jsFiddle Demo

qTip2 | jQuery "on" method with a different target

I'm using the very handy qTip2 library.
I have a table which regularly gets replaced when making various ajax requests. I would like a qtip to display at the top of a particular column in the table when the cursor hovers over a <td> in that column. To achieve this I've used the $('body').on(...) method with the <th> as the selector and then setting the selector of "show.target" to be the relevant <td> via a class assignment.
I've got it working apart from 2 points:
The qtip isn't created until I hover over the <th> at least once
Once the qtip displays when I hover over the <td>, it won't hide until I hover and leave the <th>
Here is the code:
// Create the tooltips only when document ready
$(document).ready(function () {
var timeOut = setTimeout(function () {
var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
$('body').append(tableHtml);
}, 100);
$("body").on("mouseover", '.col-2-header', function (e) {
$(this).qtip({
overwrite: false,
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window)
},
content: 'Some test content...',
show: {
event: e.type,
ready: true,
target: $('td.col-2')
}
}, e);
});
});
http://jsfiddle.net/fDavN/6106/
Any pointers welcome.
Thanks,
Lee

I made a few changes to your qTip definition. Instead of running .on for the header, it gets run for anything with the .col-2 class (Gave that class to the header as well) and set a position target for the header column.
New jsFiddle
// Create the tooltips only when document ready
$(document).ready(function () {
var timeOut = setTimeout(function () {
var tableHtml = '<table><tr><th>Col 1</th><th class="col-2-header col-2">Col 2</th></tr><tr><td>Row Label 1</td><td class="col-2">Val 1</td></tr><tr><td>Row Label 2</td><td class="col-2">Val 2</td></tr><tr><td>Row Label 3</td><td class="col-2">Val 3</td></tr></table>';
$('body').append(tableHtml);
}, 100);
$("body").on("mouseover", '.col-2', function (e) {
$(this).qtip({
overwrite: false,
position: {
my: 'bottom center',
at: 'top center',
viewport: $(window),
target: $(".col-2-header")
},
content: 'Some test content...',
show: {
event: e.type,
ready: true
}
}, e);
});
});
Edit: This seems like a partial fix as the qTip recreates itself when mousing between cells. Might be fixable by playing with the hide: event.