只有在鼠標未超過目標或工具提示的情況下關閉工具提示

使用jQuery UI工具提示時，如果我已超過目標，或者如果我在工具提示本身，我希望工具提示保持打開狀態。只有在鼠標未超過目標或工具提示的情況下關閉工具提示

我在想我可以使用關閉回調來查看我是否在工具提示或目標區域，儘管我將不得不分配另一個鼠標移出功能。

這裏是我的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>

我通過它的工作，現在看看我能想出。

來源

2013-05-21 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>

我也有揮之不去的提示一個問題，當有一堆提示鏈接因此工具提示最終會堆疊或根本不關閉，所以當打開工具提示時，這會關閉所有其他打開的工具提示。

來源

2013-05-21 06:38:48

太棒了！爲我節省了很多時間！ –

此代碼片段： var $ id = $（ui.tooltip）.attr（'id'）; //關閉任何延遲工具提示 $（'div.ui-tooltip'）。not（'＃'+ $ id）.remove（）; 是如此有價值，它應該是官方文件的一部分... –

它不是內置的，因爲他們jQuery UI團隊不認爲它會增加價值。您可以閱讀功能請求here。有一些鏈接到像this one（demo）這樣的項目，可以添加您正在尋找的效果。

您可以用最少的插件做到這一點：

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

或者你可以看看qTip或其他更強大的插件。

來源

2013-05-21 01:12:29 Josh

這是div元素一個簡單的解決方案：

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

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

來源

2013-07-02 23:17:57 Stano

我已經有一個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

來源

2017-08-26 18:09:56

只有在鼠標未超過目標或工具提示的情況下關閉工具提示

回答

相關問題