A tool for your tip

Tooltips are a very useful component for describing in detail an element or a web page. For example, when you have an image and want to describe it further, you add a tooltip. When users hover over the image, they see further information.

In our case, we will use tooltips for the buttons present in every tweet, such as Reply, Retweet, and Start. This Bootstrap plugin component is pretty simple and useful in many cases. To start it, just add the markup in bold to the tweets in the middle column (<li> in the ul#feed element):

<ul id="feed" class="list-unstyled">
  <li>
    <img src="imgs/doge.jpg" class="feed-avatar img-circle">
    <div class="feed-post">
      <h5>Doge <small>@dogeoficial - 3h</small></h5>
      <p>You can't hold a dog down without staying down with him!</p>
    </div>
    <div class="action-list">
 <a href="#" data-toggle="tooltip" data-placement="bottom" title="Reply">
        <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
      </a>
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="Retweet">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
        <span class="retweet-count">6</span>
      </a>
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="Start">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
      </a>
    </div>
  </li>

  <li>
    <img src="imgs/laika.jpg" class="feed-avatar img-circle">
    <div class="feed-post">
      <h5>Laika <small>@spacesog - 4h</small></h5>
      <p>That's one small step for a dog, one giant leap for giant</p>
    </div>
    <div class="action-list">
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="Reply">
        <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
      </a>
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="Retweet">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
        <span class="retweet-count">6</span>
      </a>
      <a href="#" data-toggle="tooltip" data-placement="bottom" title="Star">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
      </a>
    </div>
  </li>
</ul>

As you can notice, by using data attributes, you just need to add three of them to make a tooltip. The first one is data-toggle, which says the type of toggle. In our case, it is tooltip. The data-placement attribute is concerned with the placement of the tooltip (obviously). In this case, we set it to appear at the bottom, but we can set it to left, top, bottom, right, or auto. Finally, we add the title attribute, which is not a data attribute, because HTML already has the attribute title, so we can call it by this attribute.

Refresh the web app in the browser, hover the icon and you will see that… nothing happens! Unlike the other plugins, the tooltip and popover Bootstrap plugins cannot be activated simply through data attributes. They did this because of some issues, so it must be initialized through a JavaScript command. Therefore, add the following line to the main.js file:

$(document).ready(function() {
    ... // to rest of the code
    $('[data-toggle="tooltip"]').tooltip();
});

The [data-toggle="tooltip"] selector will retrieve all the tooltip elements and start it. You can also pass some options inside while calling the .tooltip() start function. The next table shows some main options (to see all of them, refer to the official documentation of Bootstrap) that can be passed through JavaScript or data attributes:

The tooltip plugin also has some useful methods for doing things such as showing all tooltips. You can call them using the .tooltip() method. As mentioned, if you want to show all tooltips, just use $('.tooltip-selector').tooltip('show'). The other options are hide, toggle, and destroy.