Code has been added to clipboard!

Adding Value to Your Content With a Bootstrap Tooltip

Reading time 2 min
Published Nov 16, 2017
Updated Oct 2, 2019

Some electronic book readers come with an inbuilt function of a dictionary: as you press an unclear word, a popup with an explanation appears. This lets you quickly get the information you're looking for without pausing your activity. Such temporary popups are useful in other areas as well.

One way to add them to your site is by using Bootstrap tooltips. A tooltip is made active by hovering on its parent element: otherwise, it remains unseen. This helps to provide additional information while keeping the overall design looking clean.

In this lesson, you will see how Bootstrap tooltips are made and learn to do it yourselves. You will also understand how to modify their position.

Bootstrap Tooltip: Main Tips

  • A Bootstrap 4 tooltip is a small popup element that appears after hovering over an element for a short period of time.
  • You can choose the position a tooltip will appear at when it's triggered.

Creating and Enabling

A tooltip Bootstrap can be created for any HTML element. To do that, you should add the data-toggle="tooltip" attribute to cause a popup to appear, and then use the title attribute to set the content of the tooltip.

Take a look at how it should look like in a simple HTML example:

Example
<a data-toggle="tooltip" href="#" title="I'm a tooltip">Tooltip element</a>

To avoid your Bootstrap tooltip not working, you must use this jQuery code inside the <script> tags:

Example
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Modifying the Position

You can also choose whether your Bootstrap tooltip appears to the right, left, top, or under the element it is assigned to. This flexibility makes it easier for the component to adapt to the overall design of your website.

To choose the position, use a data-placement attribute with a relevant value, like the code example below suggests:

Example
<a data-toggle="tooltip" href="#" data-placement="top" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="bottom" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="left" title="I am a tooltip">Tooltip element</a>
<a data-toggle="tooltip" href="#" data-placement="right" title="I am a tooltip">Tooltip element</a>

Bootstrap Tooltip: Summary

  • A tiny popup element that appears temporarily under its parent element as you hover over it is called a tooltip.
  • When you're creating a tooltip Bootstrap 4 also allows you to modify its position.
  • In case of your Bootstrap tooltip not working, make sure you have used the necessary jQuery code.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 08/03/2021
3176 People Used
Only 97 Left
Rating
5.0