Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 892
Rajeev Avatar asked Apr 18 '13 09:04

Rajeev


People also ask

How do I enable Bootstrap tooltip?

Approach: Initialize tooltips in bootstrap disabled buttons with the specified element and call the tooltip() method. To trigger tooltip on disabled button by wraping them in <span> span tag and <div> div tag and then adding 'data-toggle','data-placement' and 'title' attributes to it along with its values respectively.

How do I enable tooltip in bootstrap 5?

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.

How do I make my tooltip always visible?

Enabling sticky tooltip To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .

What are the ways to enable Bootstrap tooltip plugin for HTML elements?

To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.


2 Answers

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.

like image 64
Pathros Avatar answered Oct 26 '22 05:10

Pathros


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/

like image 37
Miljan Puzović Avatar answered Oct 26 '22 05:10

Miljan Puzović