31

jQuery UI ツールチップを使用して、ターゲットを超えた場合、またはツールチップ自体を超えた場合に、ツールチップを開いたままにしたいと思います。

close コールバックを使用して、ツールチップまたはターゲット領域の上にいるかどうかを確認できると考えていますが、別のマウスアウト関数を割り当てる必要があります。

これが私のjsfiddleです：http://jsfiddle.net/Handyman/fNjFF/

$(function()
{
    $('#target').tooltip({
        items: 'a.target',
        content: 'just some text to browse around in'
    });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="target">
    <a href="#" class="target">Hover over me!</a>
    <a href="#" class="target">Hover over me too!</a>
</div>

私は今、私が思いつくことができるものを見るために取り組んでいます。

4

4 に答える 4

47

多くの検索とテストの後に思いついたソリューションは次のとおりです。http://jsfiddle.net/Handyman/fNjFF/11/

$('#target').tooltip({
    items: 'a.target',
    content: 'Loading…',
    show: null, // show immediately
    open: function(event, ui)
    {
        if (typeof(event.originalEvent) === 'undefined')
        {
            return false;
        }
    
        var $id = $(ui.tooltip).attr('id');
    
        // close any lingering tooltips
        $('div.ui-tooltip').not('#' + $id).remove();
        
        // ajax function to pull in data and add it to the tooltip goes here
    },
    close: function(event, ui)
    {
        ui.tooltip.hover(function()
        {
            $(this).stop(true).fadeTo(400, 1); 
        },
        function()
        {
            $(this).fadeOut('400', function()
            {
                $(this).remove();
            });
        });
    }
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<body>
    <div id="target">
        <a href="#" class="target">Hover over me!</a>
        <a href="#" class="target">Hover over me too!</a>
    </div>
</body>

また、ツールチップのリンクが近接しているときにツールチップが長引くという問題がありました。そのため、ツールチップがスタックしたり、まったく閉じなかったりするため、ツールチップを開くと、開いている他のすべてのツールチップが閉じます。

于 2013-05-21T06:38:48.417 に答える
5

これは div 要素の簡単な解決策です。

$(function() {
    $("#mydiv").tooltip({
        effect: 'slide',
        content: 'loading...',
        open: function (event, ui) {
            $(ui.tooltip).appendTo(this);
        }
    });
});

http://jsfiddle.net/4YDGp/10/

于 2013-07-02T23:17:57.100 に答える
1

jQuery UI チームは、それが付加価値になるとは考えていなかったため、組み込まれていません。ここで機能リクエストを読むことができます。探している効果を追加する、このようなプロジェクト( demo )へのリンクがいくつかあります。

その最小限のプラグインでこれを行うことができます：

$('[title|=ptooltip]').pTooltip();

または、 qTipやその他のより堅牢なプラグインを調べることもできます。

于 2013-05-21T01:12:29.753 に答える
1

他の場所をクリックするか、別のツールチップを開くまで (ユーザーがツールチップのリンクをクリックできるようにするため)、HTML リンクを含むブートストラップ ツールチップを開いたままにするという同様の目標がありました。

以前の投稿に基づいた私の解決策は次のとおりです。

/**
  * For tooltips with links, don't remove hover until click somewhere else or open another tooltip
  */
 $(function() {
   // Show tooltip with html link 
   $('#tip').on("mouseover", function() {
     $('#tip').tooltip('show');
   });

   // If open any other tooltip, close the one with the link.
   $('[rel="tooltip"]').not('#tip').on("mouseover", function() {
     $('#tip').tooltip('hide');
   });

   // If click any where hide tooltip with link
   $(document).click(function() {
     $('#tip').tooltip('hide');
   });
 });

の HTML は次のようになります。重要なのは、HTML を使用したヒントの data-trigger を "" に設定することです。

<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= &quot; https://www.google.com &quot; target=‘_blank’ rel=‘noopener’&gt;tip</a>."> Linked ToolTip </span>

JSFiddle

于 2017-08-26T18:09:56.037 に答える