How to display tooltips on disabled buttons in CSS/HTML?

The way to do this is to create a new css class for your disabled buttons like this:

// CSS
.disabled-button {
    opacity: 0.5 !important;
    cursor:default !important;
}
// HTML
<button type="button" class="disabled-button data-tooltip-toggle="toggle" 
title="MY TOOLTIP!"</button>

And then in your JavaScript button handler just ignore clicks from buttons with class of disabled-button.