Bootstrap Tooltip ne fonctionne pas dans le champ de saisie

I,m, à l'aide info-bulle dans mon application Rails, mais il ne travaille pas sur un champ de saisie comme mon code est:

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

J'utilise aussi:

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

Sa fonctionne pas pour le champ de saisie, mais pour le label, il fonctionne très bien. comment puis-je inable info-bulle pour le champ de saisie?

source d'informationauteur Rajeev

  1. 25

    Ici est valable code HTML pour info-bulle:

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

    Et voici jQuery avec un bon placement pour l'info-bulle et de déclencher l'accent sur:

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

    Toujours regarder les docs officielles.

    Et voici de travail de démonstration: http://jsfiddle.net/N9vN8/69/

  2. 1

    Il est plus simple de l'activer pour toutes les entrées ou les glyphicons où vous souhaitez utiliser une info-bulle par, juste en tapant le script suivant:

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

    À l'intérieur d'une entrée:

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

    À l'intérieur d'un glyphicon:

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

    De cette façon, vous n'avez pas besoin de vous soucier de tous les Id lors de l'utilisation d'info-bulles dans plusieurs entrées dans la même forme.

    Source: docs.