引導工具提示不輸入外地工作

I，M在我的Rails應用程序中使用的工具提示，但它不是在輸入外地工作作爲我的代碼是：引導工具提示不輸入外地工作

%input#main-search{:name => "query", :placeholder => "search all 
    items", :rel => "tooltip", :title => "Search All Items", :type => "text"} 
    :javascript 
    $(document).ready(function(){ 
     $('input[title]').tooltip({placement:'bottom'}); 
    });

我還使用：

$('#main-search').tooltip({'trigger':'focus'});

其不適用於輸入字段，但對於標籤，它工作正常。我如何才能輸入字段的工具提示？

來源

2013-04-18 Rajeev

生成的標記是什麼樣的？ – epascarello

下面是有效的HTML標記提示：

<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/>

這裏是jQuery的右位置的提示，並觸發焦點：

$('input[type=text][name=secondname]').tooltip({ /*or use any other selector, class, ID*/ 
    placement: "right", 
    trigger: "focus" 
});

Always look at official docs。

這裏是工作演示：http://jsfiddle.net/N9vN8/69/

來源

2013-04-18 12:37:16

感謝您的回覆@Miljan。我已經檢查過這些代碼和官方文檔，但它不適合我。但是，如果我使用'data-original-title'而不是'title'並在.js文件中使用$（「[rel = tooltip]」）。tooltip（{trigger：「focus」}）;它的作品。我不知道爲什麼上面的代碼不工作？ – Rajeev

@rubydev，Twitter Bootstrap使用HTML5'data'屬性（更確切地說，舊版本使用'data-original-title'），所以您必須以某種方式使用數據屬性。第二種方式就像我的解決方案。但是，我不確定輸入標籤中的'rel'屬性如何，我認爲它不是語義的。正因爲如此，我避免了這一點，並使用'數據切換'，然後在JS你可以使用任何選擇器（類，ID，輸入名稱）... –

這是簡單的，你想通過只輸入下面的腳本使用提示來激活它所有的輸入或glyphicons：

<script type="text/javascript"> 
$(function() { 
       $('[data-toggle="tooltip"]').tooltip() 
      }); 
</script>

內的輸入：

<input data-toggle="tooltip" data-placement="left" title="Your awesome tip!" type='text' class="form-control" name="name" placeholder="placeholder" maxlength="10"/>

裏面一個glyphicon：

<span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="right" title="Open calendar"></span>

通過這種方式，您可以不必擔心在同一表單的多個輸入中使用工具提示時的任何ID。

來源：docs。

來源

2015-09-30 18:47:39 Pathros

引導工具提示不輸入外地工作

回答

相關問題