How to make jQuery UI Tooltip stay on, on hover

Question

Does anybody know how can I make jQuery UI tooltip to stay visible on hover. That is- I want it to stay visible when I move mouse from p element to tooltip.

Have tried on fiddle, but it seems there's a problem with :hover.

$("p").tooltip({
hide: {
    effect: 'explode'
} 
}).mouseleave(function () {
if ($('p').is(':hover')) {
    ui.tooltip.preventDefault();
    $('p').tooltip('open');
}
}).focusout(function () {
$('p').tooltip('close');
});

jsFiddle

See that similar question answered here in stackoverflow. [http://stackoverflow.com/questions/16660576/only-close-tooltip-if-mouse-is-not-over-target-or-tooltip][1] [1]: http://stackoverflow.com/questions/16660576/only-close-tooltip-if-mouse-is-not-over-target-or-tooltip — Aghil V, Aug 11 '14 at 13:37

score 5 · Accepted Answer · answered Sep 18 '16 at 13:37

That was a little tricky...

This script extends the standard jQuery UI 1.12.1, so that you get two extra options, allowing you to keep the tooltip open, while hover (the mouse stays on) it.

(function($) {

 var uiTooltipTmp = {
    options: {
        hoverTimeout: 200,
        tooltipHover: false // to have a regular behaviour by default. Use true to keep the tooltip while hovering it 
    },
    // This function will check every "hoverTimeout" if the original object or it's tooltip is hovered. If not, it will continue the standard tooltip closure procedure.
    timeoutHover: function (event,target,tooltipData,obj){
        var TO;
        var hov=false, hov2=false;
        if(target !== undefined) {
            if(target.is(":hover")){
            hov=true;}
        }
        if(tooltipData !== undefined) {
            if($(tooltipData.tooltip).is(":hover")){
            hov=true;}
        }
        if(target !== undefined || tooltipData !== undefined) {hov2=true;}
        if(hov) {
            TO = setTimeout(obj.timeoutHover,obj.options.hoverTimeout,event,target,tooltipData,obj);
        }else{
            target.data('hoverFinished',1);
            clearTimeout(TO);
            if(hov2){
                obj.closing = false;
                obj.close(event,true);}
        }
    },
    // Changed standard procedure
    close: function(event) {
      var tooltip,
          that = this,
          target = $( event ? event.currentTarget : this.element ),
          tooltipData = this._find( target );
      if(that.options.tooltipHover && (target.data('hoverFinished')===undefined || target.data('hoverFinished') === 0)){
        target.data('hoverFinished',0);
        setTimeout(that.timeoutHover, that.options.hoverTimeout,event, target, tooltipData, that);
      }
      else
      {
        if(that.options.tooltipHover){
          target.data('hoverFinished',0);}

        // The rest part of standard code is unchanged

        if ( !tooltipData ) {
          target.removeData( "ui-tooltip-open" );
          return;
        }

        tooltip = tooltipData.tooltip;
        if ( tooltipData.closing ) {
          return;
        }

        clearInterval( this.delayedShow );

        if ( target.data( "ui-tooltip-title" ) && !target.attr( "title" ) ) {
          target.attr( "title", target.data( "ui-tooltip-title" ) );
        }

        this._removeDescribedBy( target );

        tooltipData.hiding = true;
        tooltip.stop( true );
        this._hide( tooltip, this.options.hide, function() {
          that._removeTooltip( $( this ) );
        } );

        target.removeData( "ui-tooltip-open" );
        this._off( target, "mouseleave focusout keyup" );

        if ( target[ 0 ] !== this.element[ 0 ] ) {
          this._off( target, "remove" );
        }
        this._off( this.document, "mousemove" );

        if ( event && event.type === "mouseleave" ) {
          $.each( this.parents, function( id, parent ) {
            $( parent.element ).attr( "title", parent.title );
            delete that.parents[ id ];
          } );
        }

        tooltipData.closing = true;
        this._trigger( "close", event, { tooltip: tooltip } );
        if ( !tooltipData.hiding ) {
          tooltipData.closing = false;
        }
      }
  }
    };

// Extending ui.tooltip. Changing "close" function and adding two new parameters.
    $.widget( "ui.tooltip", $.ui.tooltip, uiTooltipTmp);

})(jQuery);



jQuery(document).ready(function($) {
    $("h3").tooltip({hoverTimeout: 250, tooltipHover: true});
});

body {
  background-color: #f3f3f3;
}
h3 {
  display: inline-block;
  margin: 1em 0 0 1em;
  padding: 1em;
  background-color: #FF7E6B;
  color: #fff;
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div>
  <h3 title="I'll be here while you are hovering me or my creator.">
Hover me</h3>
</div>

score 0 · Answer 2 · answered Dec 13 '16 at 19:03

$('[data-toggle="popover"]').popover({ trigger: "manual" }).on(
                        {
                            mouseenter: function () {
                                var $this = $(this);
                                $this.popover("show");
                                $(".popover").on("mouseleave", function () {
                                    $this.popover('hide');
                                });
                            },
                            mouseleave: function () {
                                var $this = $(this);
                                setTimeout(function () {
                                    if (!$(".popover:hover").length) {
                                        $this.popover("hide");
                                    }
                                }, 350);
                            }
                        });

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span type="button" role="button" class="glyphicon glyphicon-question-sign" data-toggle="popover" data-trigger="hover" data-placement="auto" data-html="true" data-content="For instance enter a link here <a href='https://google.com' target='_blank'>Almost know everything</a>"></span>

How to make jQuery UI Tooltip stay on, on hover

2 Answers2

That was a little tricky...