如何在輸入元素上使用Bootstrap工具提示？

我不是100％確定這是完全可能的，因爲input沒有rel屬性（Bootstrap網站上的示例僅顯示1個示例，其中rel="tooltip"），但我認爲它應該有效。如何在輸入元素上使用Bootstrap工具提示？

這是我的HTML：

<input id="password" type="password" />

這就是我如何努力來觸發它：

$(document).ready(function() { 

    $('input[id=password]').tooltip({'trigger':'focus'}); 
});

而且我也試過這樣：

$('#password').tooltip({'trigger':'focus'});

其中沒有似乎工作。我最終想要手動觸發它，但這是第一步。有沒有人知道這個解決方案？它有可能嗎？謝謝。

來源

2012-04-29 Loolooii

嘗試爲工具提示指定「標題」參數。像：

$('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'});

順便說一句，這是沒有錯的輸入元素具有「rel」屬性。

來源

2012-04-29 12:12:42 daeq

實際上'rel'屬性對'input'字段無效。 http://www.w3schools.com/tags/tag_input.asp – gtcharlie 2013-01-13 19:21:31

+10

@gtcharlie w3Schools是一個非常糟糕的資源。 //www.w3fools.com/ – 2013-01-26 12:12:07

+13

@ChristianNikkanen：這可能是真的，但在這個特定的情況下並非如此。 http://www.w3.org/TR/html401/interact/forms.html#h-17.4沒有列出'rel'作爲屬性。 http://www.w3.org/TR/html4/struct/links.html#adef-rel表示它「描述了從當前文檔到由'href'屬性指定的錨點的關係。」由於'input'沒有'href'，我認爲它是無效的。 – gtcharlie 2013-01-27 13:09:14

如果有人想知道這可能是那些具有多輸入字段可用於所有的文本框

<input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom"> 

<script> 
$(document).ready(function(){ 
    $('input[rel="txtTooltip"]').tooltip(); 
}); 
</script>

來源

2014-03-20 23:37:38 Senthil

更通用的工具提示選項，這樣你就不會最終調用幾個提示（），

只要做到這一點，這是基於輸入字段的ID，你可以讓它作爲類工作;

$('input').each(function (i, e) { 
    var label; 
    switch ($(e).attr('id')) { 
     case 'input-one': 
      label = 'This is input #1'; 
      break; 
     case 'input-two': 
      label = 'This is input #2'; 
      break; 
    } 
    $(e).tooltip({ 'trigger': 'focus', 'title': label }); 
});

希望它能幫助:)

來源

2015-04-28 09:37:58

基於@塞特希的響應，並使用引導3.x和JQuery的，這隻要在「標題」屬性設置沒有設置提示所有輸入元素需要「rel」屬性。

HTML：

<input class="form-control" id="inputTestID" name="inputTest" placeholder="Test" type="text" data-placement="bottom" title="Tooltip Text">

的Javascript：

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

CSS：

.tooltip-inner { 
     background-color: #fff; 
     color: #000; 
     border: 1px solid #000; 
    }

小提琴HERE。

來源

2017-10-11 13:16:13

如何在輸入元素上使用Bootstrap工具提示？

回答

相關問題