堆棧內存溢出
  簡體   English   中英

Twitter Bootstrap的工具提示

[英]Tooltips with Twitter Bootstrap

 原文  2012-05-03 17:13:50  5   7    javascript/ twitter-bootstrap

問題描述

我正在使用Twitter Bootstrap，而且我不是前端開發人員！ 但是，這幾乎使過程變得很有趣-我敢說-很有趣！

我對工具提示有些困惑。 它們包含在文檔中，但Twitter假定具備一些知識。 例如，他們說要使用以下JavaScript代碼觸發工具提示。 

$('#example').tooltip(options)

在探究它們的源代碼之后，我意識到帶有工具提示的字段必須在一個類中，並運行以下代碼。 

$('.tooltipclass').tooltip(options)

但是現在我的問題是，為什么Twitter Bootstrap不提供此類tooltip ？ 只是為了允許更大的配置？ 將帶有工具提示的單個元素添加到tooltipclass還是tooltipclass ，還是應該將周圍區域添加到tooltipclass ？ 是否使用類標識符（ .class ）而不是名稱標識符（ #name ）有關系嗎？

7 個解決方案

解決方案1
 107 已采納  2012-05-03 19:00:01

我認為您的問題歸結為在設置工具提示時使用哪個合適的選擇器，而答案幾乎就是您想要的。 如果要使用類來觸發工具提示，則可以執行以下操作： 

<a href="#" class="link" data-original-title="first tooltip">Hover me for a tooltip</a>

然后，您可以觸發帶有.link類作為工具提示附加的所有鏈接，如下所示： 

$('.link').tooltip()

現在，要回答有關引導程序開發人員為什么不使用類來觸發工具提示的問題，因為該類並不需要，您可以使用您想要定位工具提示的任何選擇器，例如（我個人最喜歡的） rel屬性。 使用此屬性，您可以將rel屬性設置為tooltip所有鏈接或元素作為目標，如下所示： 

$('[rel=tooltip]').tooltip()

您的鏈接看起來像這樣： 

<a href="#" rel="tooltip" data-original-title="first tooltip">Hover me for a tooltip</a>

當然，您還可以使用容器類或ID將工具提示定位到要使用特定選項選出或與內容的其余部分分開的特定容器內，您可以像這樣使用它： 

$('#example').tooltip({
    selector: "a[rel=tooltip]"
})

此選擇器將通過rel屬性“在#example div中”來定位所有工具提示，這樣您就可以單獨向該部分添加特殊樣式或選項。 簡而言之，您幾乎可以使用任何有效的選擇器來定位您的工具提示，而無需使用額外的類來將標記弄臟您的工具提示。

解決方案2
 14  2012-12-27 07:57:53

最簡單的方法是

將其放在標題中： 

<script>
    $(function ($) {
        $("a").tooltip()
    });
</script>

然后 

<a href="#" rel="tooltip" data-placement="bottom" title="My Tooltip Text">
    My link text
</a>

因此，如果您使用rel="tooltip"標記頁面中的任何位置，則使用該js代碼即可獲取引導工具提示。

祝好運。

解決方案3
 5  2013-08-06 18:54:50

將此添加到標題中 

<script>
    //tooltip
    $(function() {
        var tooltips = $( "[title]" ).tooltip();
        $(document)(function() {
            tooltips.tooltip( "open" );
        });
    });
</script>

然后只需將屬性title="your tooltip"到任何元素

解決方案4
 3  2012-12-29 10:22:47

我包括了JS和CSS文件，想知道為什么它不起作用，是什么使它起作用了，是當我在<head>添加以下內容時： 

<script>
jQuery(function ($) {
    $("a").tooltip()
});
</script>

解決方案5
 3  2014-07-18 22:02:23

只需標記所有數據切換... 

jQuery(function () {
    jQuery('[data-toggle=tooltip]').tooltip();
});

http://jsfiddle.net/Amged/xUQ6D/19/

解決方案6
 2  2012-05-03 17:23:01

這是因為這些東西（我的意思是工具提示等）是jQuery插件。 是的，他們假設有一些有關jQuery的基本知識。 我建議您至少尋找有關jQuery的基礎教程。

您將始終必須定義哪些元素應具有工具提示。 而且我不明白為什么Bootstrap應該提供此類，而您定義這些類別還是您自己。 也許您希望引導程序自動執行一些操作？ 但是，這種魔術也會引起很多問題（有害的副作用）。

只需編寫$(".myclass").tooltip()即可輕松實現這一魔力，此行代碼完全符合您的要求。 您唯一要做的就是將myclass類附加到需要應用工具提示thing的那些元素上。 （只需確保在加載DOM之后運行該行代碼即可。請參見下文。） 

$(document).ready(function() {
    $(".myclass").tooltip();
});

編輯：顯然您不能使用類工具提示 （可能是因為它在內部使用！）。

我只是想知道為什么引導程序不運行您可以包含的某些類指定的代碼。

您想要的東西產生的代碼幾乎與您現在要做的相同。 但是，他們沒有這樣做的最大原因是，這引起了很多麻煩。 一個人想要將其分配給具有ID的元素； 其他人希望將其分配給具有指定類名的元素； 其他人又想將其分配給通過某些選擇過程實現的指定元素。 這3個選項導致額外的復雜性，而jQuery已經提供了。 我還沒有看到許多插件可以實現您想要的功能（只是因為它是不必要的；它實際上並不會節省您的代碼）。

解決方案7
 0  2014-03-23 14:44:46

簡單使用這個： 

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip">
   tooltip
</a>

使用jQuery： 

$(document).ready(function(){
    $('#mytooltip').tooltip();
});

您可以在工具提示的左側，您可以簡單地添加this->data-placement="left" 

<a href="#" id="mytooltip" class="btn btn-praimary" data-toggle="tooltip" title="my tooltip" data-placement="left">tooltip</a>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Twitter Bootstrap工具提示 關於懸停和焦點的Twitter Bootstrap工具提示 twitter bootstrap工具提示的垂直偏移量 JavaScript到Active Twitter Bootstrap工具提示 如何翻轉Twitter Bootstrap的工具提示 Twitter Bootstrap工具提示不適用於CSS中的前綴 由於$ {document）.ready，Twitter引導工具提示在頁面更改上中斷 Twitter Bootstrap的多個問題-切換工具提示，無響應 列表框選項元素上的Twitter引導程序彈出窗口和工具提示顯示在錯誤的位置 如何使Twitter Bootstrap工具提示有多行？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM