For my application, I'm utilizing Bootstrap 4 along with tooltips. My objective is to toggle the tooltips individually and only display them upon clicking. The following code allows me to achieve this:
<input type="text" id="name" class="form-control" autocomplete="off"
data-toggle="tooltip" data-placement="bottom" title="Write name here.">
To show the tooltip one by one, I use the JavaScript snippet below which is triggered upon a button click:
$('#name').tooltip("show");
To hide or dispose of the tooltip, I use the script provided below:
$('#name').tooltip("dispose");
The reason behind using "dispose" is that I prefer the tooltip not to be visible unless specifically activated by the button.
An issue arises when hovering over the input field as the browser (in my case Firefox Developer Edition) displays the tooltip with its own styling due to the text being in the title attribute.
I wonder if there's a way in Bootstrap to store the text to be shown in another attribute like data-tooltiptitle, for example:
<input type="text" id="name" class="form-control" autocomplete="off"
data-toggle="tooltip" data-placement="bottom" data-tooltiptitle="Write name here.">
Perhaps then instructing the tooltip to utilize the data-tooltiptitle attribute for the text via jQuery.
Your guidance on this matter would be greatly appreciated.