I have a button that opens a Bootstrap modal, but there’s a use case where I want to stop that button from opening the modal and instead display a tooltip.
In JQuery’s documentation for working with HTML5 data and data-* attributes it’s easy to get confused. You’d think you could just do
$('#free-trial-btn').data('toggle', 'tooltip') to change the
'tooltip'. But apparently (thanks Stack Overflow for the clarification), this doesn’t modify the
data-toggle at all. Instead it stores the string
'tooltip' in the
'toggle' field as if it were a variable – if I then did
$('#free-trial-btn').data('toggle') it would return
So how can you set or change the value of a data-* attribute using JQuery?
.attr method! Duh. Right? Yea, still a little confusing.
And then a sidenote about tooltips and disabled buttons
The next tricky thing I faced was getting a tooltip to work on a disabled button. Turns out the only simple way to do this without messing with the disabled button is to put the tooltip on a parent element. So here’s my final solution, with a little bit of JQuery chaining to get all the work done: