这有点棘手......

Question

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

试过小提琴，但似乎有一个问题：悬停。

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

Answer 2

$('[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>

如何在悬停时使jQuery UI Tooltip保持开启状态

2 个答案:

这有点棘手......