Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery ui tooltips modified to work on click only opens and closes one time

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="">&nbsp;</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/

like image 322
bobpeck Avatar asked Feb 18 '23 13:02

bobpeck


1 Answers

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 ;)

like image 188
gioserr Avatar answered Feb 21 '23 05:02

gioserr