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/
Related
I'm using Bootstrap Popovers to supply "help text" in my UI.
My existing JavaScript:
// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'hover',
placement: 'auto bottom'
});
The Popover displays when I hover with a mouse or touch the element. My problem is with anchor tag elements. If the Popover is triggered by a touch event:
Don't follow the link
Add an anchor tag element to the Popover text to give access to the underlying link
I'd detect whether the user is on a touch device, then serve different content from data attributes. Use Popover methods to trigger your various actions.
<a href="#"
data-href="http://jsfiddle.net"
data-toggle="popover"
title="A popover title"
data-hover-content="No link here."
data-touch-content="<a href='http://jsfiddle.net'>
A link here</a>.">A popover link
</a>
var is_touch_device = 'ontouchstart' in document.documentElement;
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'manual',
placement: 'auto bottom',
html: true,
content: function () {
if (is_touch_device) {
return $(this).attr('data-touch-content');
} else {
return $(this).attr('data-hover-content');
}
}
})
.on('mouseenter touch', function (e) {
$(this).popover('show');
})
.on('mouseleave', function () {
$(this).popover('hide');
})
.on('click', function () {
if (!is_touch_device) {
window.location.href = $(this).attr('data-href');
}
});
Fiddle demo
This can probably be simplified a bit. You could specify your content in the content function instead, of course.
this might help:
event.preventDefault()
"Description: If this method is called, the default action of the event will not be triggered... For example, clicked anchors will not take the browser to a new URL..."
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');
});
I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle
change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle
Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});
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
I have page with UpdatePanel where I add some forms on click on the page.
In those new added elements I have images that must use qTip.
I have this:
$(document).ready(function () {
$('.ttip').qtip({
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
});
});
And this works with elements that are visibile in the begining.
All elements that use qTip have runat="server" attribute.
BUT when I add new element with class ttip it doesn't work.
Exloring I see that the elements that are visible in the beggining have attribute:
data-hasqtip="6"
But dynamically added elements doesn't have this attribute.
How can I workaround this?
How to make this somehow live?
UPDATE BASED ON ANSWER
I have added this in code behind where I make element visible:
// Button click handler that add new element to page
public void AddNewElement(Image image)
{
image.Visible = true;
image.ToolTip = "blah";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"tmp",
#"<script type='text/javascript'>
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
);
</script>",
false);
}
But it still doesn't work :(
Once you have added new elements, reinitialize qTip plugin:
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(...);