web-dev-qa-db-ja.com

マウスがターゲットまたはツールチップ上にない場合にのみツールチップを閉じる

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>

私は何を思い付くことができるかを確認するために今それを通して取り組んでいます。

jqueryjquery-uijquery-ui-tooltip
30
Francis Lewis

多くの検索とテストの後に私が思いついた解決策は次のとおりです： 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>

また、ツールチップリンクが近くにある場合、ツールチップが残っていると問題が発生したため、ツールチップがスタックしたり、まったく閉じなかったりするため、ツールチップを開くと、開いている他のすべてのツールチップが閉じます。

44
Francis Lewis

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

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

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

4
Stano

bootstrapツールチップと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のヒントのデータトリガーを ""に設定しています。

<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’>tip</a>."> Linked ToolTip </span>

JSFiddle

1
Geoffrey Bourne

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

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

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

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

1
Josh