HTML5 data-* attributes with JQuery

The Challenge:

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.

<!-- What I have to start -->
<button type="button" data-toggle="modal" data-target="#free-trial-modal">
  Launch demo modal
</button>

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 data-toggle from 'modal' to '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 'tooltip'.

So how can you set or change the value of a data-* attribute using JQuery?

The Solution

Use the .attr method! Duh. Right? Yea, still a little confusing.

$('#free-trial-btn').attr('data-toggle', 'tooltip');

So, in summary, if you want to set a data-* attribute, use the .attr() function. If you want to access the value of an existing data-* attribute, use the .data() function $('#free-trial-btn').data()

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:

<div class="btn-wrapper" data-toggle="tooltip" title="Sorry, no free trial right now!">
  <button type="button">Free Trial</button>
</div>

<script>
  $( document ).ready(function(){
    var $freeBtn = $('#free-trial-btn');
    if(user_shouldnt_get_free_trial){
      $freeBtn.attr('data-toggle', 'tooltip').removeAttr('data-target');
    }
    // Other Code here...
  });
</script>

Back to Blog