Bootstrap: Tooltips for Modal buttons…

I’m a huge fan of Twitter’s Bootstrap framework. It’s a set of free-to-use stylesheets and scripts that gets you started on designing well laid out, mobile responsive sites. This site of mine, right here, uses it. It simplifies front-end development and amazing looking websites can be rolled out quickly with it.

Just like every plugin out there, this too has minor kinks and annoyances. And just like every other plugin, there’s always a fix. This post is about one of them.

The issue

Tooltips don’t work on Modal buttons.

Description

Tooltips

Tooltips in Bootstrap are a javascript feature that you can use to display an alternate text instead of using the alt attribute of a hyperlink tag (<a>).

The link to my site’s homepage uses a tooltip.

You can see the same thing be done on a button.

You can add tooltips to hyperlinks and buttons by adding a few attributes.

1. The data-toggle="tooltip" attribute will mark the link or the button as one with a tooltip.
2. The data-placement attribute sets the position of the tooltip relative to the button or link. It can be top, bottom, left, or right. e.g. data-placement="top"
3. The title attribute sets the content of the tooltip. e.g. title="This is a tooltip."

The tooltip code for the link above would be like this.

<a title="My homepage" href="http://denverdias.com/" data-toggle="tooltip" data-placement="top">my site's homepage</a>

Tooltips are an opt-in feature in Bootstrap which means they do not work unless you add the following code. This instructs Bootstrap to look for tooltip triggers.

<script>
  $(document).ready(function(){$("body").tooltip({selector:'[data-toggle=tooltip]'});
</script>

Modals

Modals are in-page prompts – like a dialog box but it doesn’t open in a separate window or a tab.

Here’s a modal trigger for you.

The code I’ve used for the modal structure is as follows.

<div id="deModal" class="modal fade hidden-print" tabindex="-1">
  <div class="modal-dialog" data-dismiss="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">This is the demo modal</h4>
      </div>
      <div class="modal-body">
        <div align="center">
          That's pretty much it.
        </div>
        <hr />
        <div align="center">
          Click anywhere to close.
        </div>
      </div>
    </div>
  </div>
</div>

Using them together

The problem here is that the modal trigger and the tooltip share the data-toggle attribute. Since no other attribute was common among them, there would be no conflict. They could simply get away by using data-toggle="tooltip modal".

Sadly, that doesn’t work.

The fixes

There are more than one ways to fix this problem. Let’s start with the easiest of them all.

Wrap the button

The button can be wrapped with a <span> tag, that can trigger the tooltip by proxy. The code would look like the following.

<span title="The tooltip" data-toggle="tooltip" data-placement="top"><button class="btn btn-default btn-xs" data-toggle="modal" data-target="#deModal">modal trigger</button></span>

That would look like this: modal trigger.

We’ve used <span> instead of <div> because <span> is usually, unless you’ve altered the styles, always an inline element.

Wrap the text

Instead of wrapping the button, you can wrap the text within the button using the following.

<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#deModal"><span title="The tooltip" data-toggle="tooltip" data-placement="top">modal trigger</span></button>

That code results in this: modal trigger

Here the tooltip trigger is the text within the button which means you can make it so that only a part of the text triggers the tooltip. In this button, the tooltip triggers only when you hover over the word ‘button’.

Modify the trigger for the tooltip

The scripts for modals are always active and you don’t need to opt in. If you choose to modify the javascript so that the modal will have to trigger on a different attribute, you’ll have to host the modified javascript yourself. Then again, you’re likely to have far too many tooltips on your page than modals. For those concerned about server load, who have no problem with modifying their front-end to accommodate this fix, I’d say this is the best option.

Follow these steps

1. Change all data-toggle="tooltip" attributes in your buttons and links to something else. I’ve changed it to data-show="tip".

   <a title="My homepage" href="http://denverdias.com/" data-show="tip" data-placement="top">my site's homepage</a>

2. Change the opt-in code, so that the tooltip triggers at the changed markup.

   <script>
     $(document).ready(function(){$("body").tooltip({selector:'[data-show=tip]'});
   </script>

With that out of the way, you can now use attributes of both tooltips and modals in the same element without a wrapper.

The code for my new tooltip enriched modal trigger button looks like this.

<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#deModal" data-show="tip" title="The tooltip" data-placement="top">modal trigger button</button>

Comparison

The two wrapping techniques are pretty simple to implement with the latter offering better flexibility to the tooltip.

However, modifying the tooltip trigger makes tooltips a bit more consistent in appearance as you can see in the following interactive illustration. Compare the tooltips from the first three to the fourth button.

Button Wrap Text Wrap Trigger Change Tooltip-only Button

The two wrapping methods distort the placement of the tooltip while the trigger change method places the tooltips in a consistent manner.

Pro Tip

If you’re worried that modifying the tooltip trigger selector will temporarily break the site until the roll-out is complete, don’t be. You can opt in for tooltips of both selectors until you’ve rolled out the changes. This way the tooltips will trigger on either selectors. Once you’ve made all the changes, you can simply remove the deprecated tooltip trigger selector.

And that’s it. Thanks for reading. Do let me know if you’ve found it helpful.