[英]How to make Bootstrap 3 tooltip follow mouse?
我的網站上有一個鏈接列表,它們在Bootstrap工具提示中顯示圖像
<a data-html="true" data-toggle="tooltip" title="<img src='1.png' />">Item 1</a>
<a data-html="true" data-toggle="tooltip" title="<img src='2.png' />">Item 2</a>
<a data-html="true" data-toggle="tooltip" title="<img src='3.png' />">Item 3</a>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('a').tooltip({
placement: "right"
})
}
</script>
這只是在所有鏈接的右側顯示工具提示。 雖然圖像是靜態的,但我希望當用戶移動鼠標時,工具提示圖像會移動。
您可以在此站點上看到我想要做的示例: http : //www.hearthpwn.com/decks/381677-druidereno 。 在右側邊欄上,有一個可以懸停的卡片列表,工具提示圖像跟隨鼠標移動。 看起來他們不使用Bootstrap,我只是想模仿功能。
我在Bootstrap功能中沒有看到任何操作: http : //getbootstrap.com/javascript/#tooltips
誰知道我怎么做到這一點?
你不能在bootstrap中本地執行此操作。 但您可以通過使用“代理元素”輕松模仿行為。 訣竅是將圖像工具提示附加到第二個元素,然后在圖像內移動鼠標光標時根據鼠標位置更新元素位置。
一個圖像 :
<img id="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" />
一個代理元素,這里是一個帶trigger: manual
的<i>
標簽trigger: manual
:
<i id="img-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip for image" data-animation="false" data-trigger="manual"/>
將代理元素position
為absolute
position
,以便可以在任何位置移動:
#img-tooltip {
position: absolute;
}
最后更新代理位置並在圖像內部移動鼠標光標時顯示工具提示:
$("#img").on('mousemove', function(e) {
$("#img-tooltip").css({top: e.pageY, left: e.pageX });
$('[data-toggle="tooltip"]').tooltip('show')
})
$("#img").on('mouseleave', function(e) {
$('[data-toggle="tooltip"]').tooltip('hide')
})
演示 - > http://jsfiddle.net/h2dL07ns/
更新了演示 - > http://jsfiddle.net/h2dL07ns/324/使用@ Marks的pointer-events: none;
建議。 它消除了偶爾的閃爍。
增強了多個圖像的davickon答案
$(".img").on('mousemove', function(e) { $("#" + $(this).attr("TooltipId")).css({ top: e.pageY, left: e.pageX }); $("#" + $(this).attr("TooltipId")).tooltip('show'); $(".tooltip-inner").css({ "background-color": $(this).attr("TooltipBackround") }); var a = ($("#" + $(this).attr("TooltipId")).attr("data-placement") != "") ? $("#" + $(this).attr("TooltipId")).attr("data-placement") : "top"; $(".tooltip-arrow").css("border-" + a + "-color", $(this).attr("TooltipBackround")); }) $(".img").on('mouseleave', function(e) { $("#" + $(this).attr("TooltipId")).tooltip('hide') })
.img-tooltip { position: absolute; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <h1>header</h1> <img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="green" TooltipId="img-tooltip1" /> <i id="img-tooltip1" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Tooltip for image <h1>Faizan</h1>" data-animation="false" data-trigger="manual"></i> <br> <br> <br> <br> <img class="img" src="https://static.pexels.com/photos/6555/nature-sunset-person-woman-large.jpg" TooltipBackround="blue" TooltipId="img-tooltip2" /> <i id="img-tooltip2" class="img-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" data-animation="false" data-trigger="manual" title="Tooltip for image <h1>Faizan Anwer</h1>"></i>
我正在使用angularjs並面臨類似的問題。 在bootstrap中沒有內置功能。 我也嘗試過使用代理元素。 但是,它造成了很多問題。 例如。 我無法點擊代理元素下面的元素。 我找到了一個解決方法。 這是hacky和unuggested。
您可以在瀏覽器控制台中通過設置要查看工具提示的元素的tooltip屬性來創建工具提示,從而獲得DOM元素。 我復制了那個DOM元素並將其粘貼到我的html中,正是在DOM中的位置,並刪除了以前使用的tooltip屬性。 它對我有用,並通過工具提示給了我更大的靈活性。 您必須刪除一些屬性並進行其他一些小的更改。
使用Faizan的代碼並響應T3db0t對閃爍的擔憂,我發現堅持不間斷的空間,增加可見性:隱藏到css,關閉代理元素標簽減少了閃爍。
基本上說:
<i> </i>
用css:
.area-tooltip {
position: absolute;
visibility: hidden;
}
看我的筆: https : //codepen.io/Larhanya/pen/VMjZBz (代碼調整為圖像映射,因為這是我需要的)
從筆中截斷HTML:
<img src="http://lorempixel.com/output/food-q-c-350-350-5.jpg" usemap="#foodmap">
<map id="#foodmap" name="foodmap">
<area class="area" shape="poly" coords="78,133,158,182,162,349,0,349,0,283" href="#" target="_self" style="outline:none;" TooltipBackround="black" TooltipId="area-tooltip4" />
<i id="area-tooltip4" class="area-tooltip" data-toggle="tooltip" data-html="true" data-placement="right" title="Pepper" data-animation="false" data-trigger="manual"> </i>
</map>
將“mousemove”事件偵聽器綁定到文檔。 捕獲鼠標的e.pageX,e.pageY移動並將“顯示的”工具提示位置設置為鼠標所在的位置。 (需要jQuery)
$(document).on('mousemove', function (e) {
if( $('div.tooltip').css('display') !== 'hidden' ) {
var toolHalfHeight = $('div.tooltip').outerHeight() / 2;
$('div.tooltip').css('left', e.pageX).css('top', e.pageY - toolHalfHeight);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.