CODEWITHSUNDEEP
twitter-bootstraptooltip
Rajeev
Rajeev

Reputation: 1113

Bootstrap Tooltip not working on input field

I,m using tooltip in my Rails app but it not working on input field as my code is:

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

I also use:

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

Its not work for input field but for label it works fine. how can I inable tooltip for input field?

Upvotes: 9

Views: 30025

Answers (2)

Pathros
Pathros

Reputation: 10730

It is simpler to activate it to all inputs or glyphicons where you want to use a tooltip by just typing the following script:

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

Inside an input:

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

Inside a glyphicon:

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

This way you don't need to worry about any IDs when using tooltips in several inputs in the same form.

Source: docs.

Upvotes: 1

Miljan Puzović
Miljan Puzović

Reputation: 5820

Here is valid HTML markup for tooltip:

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

And here is jQuery with right placement for tooltip and trigger on focus:

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

Always look at official docs.

And here is working demo: http://jsfiddle.net/N9vN8/69/

Upvotes: 26

Related Questions