web-dev-qa-db-fra.com

Comment utiliser Bootstrap info-bulle sur les éléments d'entrée?

Je ne suis pas sûr à 100% que cela soit possible, car input n'a pas d'attribut rel (l'exemple du site Web Bootstrap ne montre que 1 exemple avec rel="tooltip"), mais je pense que cela devrait fonctionner.

Voici mon HTML:

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

Et voici comment j'essaie de le déclencher:

$(document).ready(function () {

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

Et j'ai aussi essayé ça:

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

Et aucun d'entre eux ne semble fonctionner. Je veux éventuellement le déclencher manuellement, mais c'est la première étape. Quelqu'un connaît-il une solution à cela? Est-ce possible du tout? Merci.

jqueryhtmltooltiptwitter-bootstrap
34
Loolooii

Essayez de spécifier le paramètre "title" dans l'info-bulle. Comme:

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

Btw, ce n'est rien de mal avec l'élément d'entrée ayant l'attribut "rel".

65
daeq

Au cas où quelqu'un voudrait connaître une option d'info-bulle plus générique pour toutes les zones de texte

$(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 et 4

Basé sur la réponse de @ Senthil, et en utilisant bootstrap 3.x ou 4.x et JQuery, cela définira des info-bulles pour tous les éléments d'entrée tant que la propriété title est définie sans la nécessité de l'attribut 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

Cela peut être utile pour ceux qui ont plusieurs champs de saisie, donc vous ne finirez pas par appeler plusieurs info-bulles (),

Faites-le, cela est basé sur l'ID du champ de saisie, vous pouvez aussi le faire fonctionner en classe;

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

J'espère que ça aide :)

3
ZAD