11

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 on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.

Is this possible at all?

7 Answers 7

33

Using jqueryui:

HTML:

<div id="tt" >Test</div>

JS:

$('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});

You can check it using http://jsfiddle.net/adamovic/A44EB/

Thanks Piradian for helping improve the code.

3
  • 8
    The problem with this solution is that once you open the tooltip once via click, it will adopt a hovering behaviour afterwards.
    – Dologan
    Jul 4, 2014 at 10:40
  • 1
    This is not working for me. I have bootstrap 3.03 and am getting an error in the mimified version 'ncaught TypeError: e[c] is not a function' any suggestions? Its error takes place on the open May 13, 2016 at 20:05
  • BTW, this code is fixed with this hovering behavior problem, I think so May 28, 2017 at 16:40
12

This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.

Fiddle: http://jsfiddle.net/c6wa4un8/57/

Code:

var id = "#tt";
var $elem = $(id);

$elem.on("mouseenter", function (e) {
    e.stopImmediatePropagation();
});

$elem.tooltip({ items: id, content: "Displaying on click"});

$elem.on("click", function (e) {
    $elem.tooltip("open");
});


$elem.on("mouseleave", function (e) {
    e.stopImmediatePropagation();
});


$(document).mouseup(function (e) {
    var container = $(".ui-tooltip");
    if (! container.is(e.target) && 
        container.has(e.target).length === 0)
    {
        $elem.tooltip("close");
    }
});
7

This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.

The Mouseout is cancelled in this example to make everything based on click events.

HTML

<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1"  title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2"  title="bla bla 2">
?</button>
</p>

jQuery

$(document).ready(function(){ 
$(function () {
//show
$(document).on('click', '.trigger', function () {
    $(this).addClass("on");
    $(this).tooltip({
        items: '.trigger.on',
        position: {
            my: "left+15 center",
            at: "right center",
            collision: "flip"
        }
    });
    $(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
    $(this).tooltip('close');
    $(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
    e.stopImmediatePropagation();
});
})
})

http://jsfiddle.net/AK7pv/111/

5

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 );
                    $( "<div>" )
                            .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:

   <p> 
       <input class='hidden' id="age"  /> 
       <a href=# class="fireTip">Click me ya bastard</a>
   </p>

  <div class="myPopover hidden">
       <h3>Hi Sten this is the div</h3>
  </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/

5

This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a>

Sample: http://jsfiddle.net/A44EB/123/

4

Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.

 $('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("enable"); // this line added
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});
-2

jsfiddle http://jsfiddle.net/bh4ctmuj/225/

This may help.

<!-- HTML --> 
      <a href="#" title="Link Detail in Tooltip">Click me to see Tooltip</a>      
 <!-- Jquery code--> 

    $('a').tooltip({          
     disabled: true,
     close: function( event, ui ) { $(this).tooltip('disable'); }
    });

  $('a').on('click', function () {
     $(this).tooltip('enable').tooltip('open');
   });
3
  • Thanks, but I preffer would like to use tooltip widget, because that would maintain my code simple. However, your suggestion is still a backup-plan if it can't be done with jQueryUI's own widget. So, anyone?
    – besq
    Feb 8, 2013 at 8:15
  • I have improved and updated the answer for future.readers.Although previous answer was working but that was using another custom library
    – Garry
    Feb 10, 2017 at 17:27
  • 1
    The updated version seems to be the cleanest answer to me.
    – AnthonyVO
    Jul 23, 2019 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.