jQueryUI tooltip Widget to show tooltip on Click

Question

How the new jQueryUI\'s tooltip widget can be modified to open the tooltip on click event on certain element\'s on document, while the others are still showing their tootip

Answer 1

I have been playing with this issue today, I figured I would share my results...

Using the example from jQueryUI tooltip, custom styling and custom content

I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.

My JS is like this:

       $(function() {
        $( document ).tooltip({
            items: "input",
            content: function() {
                return $('.myPopover').html();
            },
            position: {
                my: "center bottom-20",
                at: "center top",
                using: function( position, feedback ) {
                    $( this ).css( position );
                    $( "
" )
                            .addClass( "arrow" )
                            .addClass( feedback.vertical )
                            .addClass( feedback.horizontal )
                            .appendTo( this );
                }
            }
        });

        $('.fireTip').click(function () {
            if(!$(this).hasClass('open')) {
                $('#age').trigger('mouseover');
                $(this).addClass('open');
            } else {
                $('#age').trigger('mouseout');
                $(this).removeClass('open');
            }

        })

    });

The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.

My HTML:

   
 
        
       Click me ya bastard
   

  

       
Hi Sten this is the div
  

Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...

Anyways, here is a fiddle to see the interaction a bit better: http://jsfiddle.net/AK7pv/