jquery-ui - 如何使 jQuery UI 工具提示在悬停时保持打开状态

Question

有谁知道如何使 jQuery UI 工具提示在悬停时保持可见。也就是说，当我将鼠标从 p 元素移动到工具提示时，我希望它保持可见。

尝试过 fiddle ，但 :hover 似乎有问题。

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

jsFiddle

Answer 1

这有点棘手......

此脚本扩展了标准 jQuery UI 1.12.1，以便您获得两个额外的选项，允许您在悬停(鼠标停留在上面)时保持工具提示打开。

(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>