web-dev-qa-db-ja.com

Bootstrapツールチップが入力フィールドで機能しない

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'});

入力フィールドでは機能しませんが、ラベルでは問題なく機能します。入力フィールドのツールチップを無効にするにはどうすればよいですか？

twitter-bootstraptooltip
9
Rajeev

ツールチップの有効な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"
});

常に公式ドキュメントをご覧ください 。

そしてここに作業デモがあります： http://jsfiddle.net/N9vN8/69/

25
Miljan Puzović

次のスクリプトを入力するだけで、ツールチップを使用するすべての入力またはグリフィコンに対してアクティブ化する方が簡単です。

<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"/>

グリフィコンの内部：

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

これにより、同じフォームの複数の入力でツールチップを使用するときにIDについて心配する必要がなくなります。

出典： docs 。

1
Pathros