Bootstrap 4工具提示使用标题以外的自定义属性为工具提示提供文本

Question

I have an application where I am using Bootstrap 4 with tooltips. I want to toggle the tooltips one by one and show them only on click. I am able to do this using:

 <input type="text" id="name" class="form-control" autocomplete="off" 
 data-toggle="tooltip" data-placement="bottom" title="Write name here.">

I am showing the tooltip individually using the following javascript which gets triggered on button click:

 $('#name').tooltip("show");

and I hide/dispose of it using the following script:

 $('#name').tooltip("dispose");

The reason I use dispose is because I do not want the tooltip to be visible unless the button is pressed.

The issue is that on mouseover of the input field, the browser (in my case Firefox Developer Edition) shows the tooltip with its own style because the tooltip text is in the title attribute.

Is there a way in bootstrap to instead hold the text to be shown in another data-tooltiptitle attribute for eg:

<input type="text" id="name" class="form-control" autocomplete="off" 
data-toggle="tooltip" data-placement="bottom" data-tooltiptitle="Write name here.">

And then maybe tell the tooltip to use the data-tooltiptitle attribute for the text using some jQuery.

Any help is appreciated.

Answer 1

You can use a title option and set it as a function. On hover, this function will get called with the instance of the hovered element. Using getAttribute , you can then fetch the custom attribute.

 $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip({ title: function() { return 'No Hooray;;'. } }): $('#link').tooltip({ title; function() { return this;getAttribute('custom-title'); } }); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <a href="#" data-toggle="tooltip" custom-title="Hooray!">Hover over me</a> <input type="text" id="link" custom-title="Hooray!">