web-dev-qa-db-ja.com

入力要素でBootstrapツールチップを使用するには？

inputにはrel属性がないため、これが可能かどうかは100％確信できません（Bootstrap Webサイトの例はrel="tooltip"）を使用した1つの例ですが、動作するはずです。

これは私のHTMLです：

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

そして、これは私がそれをトリガーしようとする方法です：

$(document).ready(function () {

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

そして、私もこれを試しました：

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

そして、それらのどれも機能していないようです。最終的には手動でトリガーしたいのですが、これが最初のステップです。誰かがこれの解決策を知っていますか？まったく可能ですか？ありがとう。

jqueryhtmltooltiptwitter-bootstrap
34
Loolooii

ツールタイトルに「タイトル」パラメーターを指定してみてください。のような：

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

ところで、それは「rel」属性を持つ入力要素には何の問題もありません。

65
daeq

誰もがすべてのテキストボックスのより一般的なツールチップオプションを知りたい場合

$(document).ready(function() {
  $('input[rel="txtTooltip"]').tooltip();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom">
12
Senthil

Boostrap 3および4

@Senthilの応答に基づいて、bootstrap 3.xまたは4.xとJQueryを使用して、これはtitleプロパティが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;
}
4
c-chavez

これは、複数の入力フィールドがある場合に役立ちます。そのため、いくつかのtooltip（）を呼び出すことになりません。

これを行うだけで、これは入力フィールドの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 });
});

それが役に立てば幸い ：）

3
ZAD