How to use Bootstrap tooltip on input elements?

Question

I'm not 100% sure this is at all possible, because input doesn't have a rel attribute (the example on the Bootstrap website shows only 1 example with rel="tooltip"), but I think it should work.

This is my HTML:

<input id="password" type="password" />  

And this is how I try to trigger it:

$(document).ready(function () {      $('input[id=password]').tooltip({'trigger':'focus'}); }); 

And I also tried this:

$('#password').tooltip({'trigger':'focus'}); 

And none of them seem to work. I eventually want to trigger it manually, but this is the first step. Does anybody know a solution for this? Is it possible at all? Thanks.

Answer 1

Try to specify "title" parameter to tooltip. Like:

$('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'}); 

Btw, that's nothing wrong with input element having "rel" attribute.

Answer 2

In case anyone wants to know more generic tooltip option for the all the text boxes

$(document).ready(function() {    $('input[rel="txtTooltip"]').tooltip();  });

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  <input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom">