jquery: 1.8.2
jquery ui: 1.9.1
I modified the default way of implementing a jquery ui tooltip so it would work on click instead of hover.
The 'a' tag is the thing you click to activate the tooltip, but not defined as a tooltip. The tooltip & tooltip content are placed after the 'a' tag and hidden with css so you cant hover or see the content.
<a class="tooltip-click" id="tt3">asdf</a><span class="tooltip-tick" title=""> </span>
<div class="tooltip-content">3</div>
In the tooltip implementation I use the "content:" attribute to grab the content of the div next to the tooltip definition, rather than using "title"
I also have a function inside the tooltip definition that closes the tooltip if you click the tooltip content.
$('.tooltip-tick').tooltip({
position: {
my: "left+15 center",
at: "right center",
using: function( position, feedback ) {
$( this ).css( position );
//function to close tooltip when content is touched
$('.ui-tooltip-content').click(function(){
$(".tooltip-tick").tooltip("close");
});
}},
//the content of the div next to the tooltip instead of using title
content: function(){
return $(this).next().html();
}
});
When the A tag is clicked it first closes any open tooltips, then opens the neccessary one:
$('.tooltip-click').click(function () {
//first i close open tooltips
if($(".ui-tooltip").length) $(".tooltip-tick").tooltip("close");
//then open the tooltip next to the a tag
$($(this).next('.tooltip-tick')).tooltip('open');
});
Everything works, but only once. http://jsfiddle.net/Js8g6/
Try to set title-attribute of ".tooltip-tick" after closing the tooltip:
$(".tooltip-tick").attr("title", "");
The title is needed to open the tooltip, but somehow it will be removed after closing.
This is just a little work-around ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With