Подсказка Bootstrap не работает на поле ввода

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

его не работает для поля ввода, но для метки он работает нормально. как я могу использовать всплывающую подсказку для поля ввода?

9
tooltip twitter-bootstrap

2 ответов

вот допустимая разметка 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

Это проще, чтобы активировать его, чтобы все входы или технологии 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>

таким образом, вам не нужно беспокоиться о каких-либо идентификаторах при использовании всплывающих подсказок в нескольких входах в одной форме.

источник: docs.

1