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?
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.
To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.
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" .
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With