Tooltips and Popovers of Bootstrap

 Bootstrap Tooltips

Tooltips are a piece of marker text that will appear when you hover the mouse over a hyperlink. In Bootstrap 4, there are certain things you should take care before trying to add tooltip. If you have noticed the starter template contains a new third party JavaScript library called Popper. This is mainly used for the tooltip component for positioning.

Topics Covered:

Bootstrap 4 Tooltips

1.Basics of Bootstrap 4 tooltips

2.Initializing tooltip

3.Using tooltip with anchor tag

4.Positioning of tooltips

5.Using tooltip with buttons

6.Adding HTML content in tooltip

7.Customizing options

1. Basics of Bootstrap 4 Tooltips

 Tooltips is JavaScript component, hence you should include jQuery and bootstrap.min.js files on your HTML template. Alternatively you can also use the combined script file bootstrap.bundle.min.js.

 Also for proper positioning of tooltips, you should include popper.min.js on all your source code.

 Tooltips will not be loaded by default due to the performance of page loading. Hence, needs to be initialized with the parent element for loading on the pag

 The sequence of script files should be jQuery, popper.min.js, bootstrap.min.js and then the initialization script.

 Tooltip with zero title length will not be shown.

 Bootstrap 4 uses CSS animation and data attributes to control the behavior of tooltips.

2. Initializing Tooltips in Bootstrap 4

 Unlike other Bootstrap components, tooltips are to be initialized before the usage. You can add global initialization like below or use specific element level initialization if required. $(function () { $(”).tooltip() })

 Below is the code for activating tooltip at anchor element level. <script> $(“a”).tooltip(); </script>

 Below is the code for using button for initializing: <script> $(“button”).tooltip(); </script>

Remember this script code should be added right after the popper.min.js and bootstrap.min.js links for the tooltip to work as expected. You can check the starter template format here.

3. Using Tooltip on Anchor Tag

Let us first create a simple tooltip using anchor tag. The code should look like below: <a href=”#” data-toggle=”tooltip” data-animation=”false” title=”This is a tooltip”> Content to Show </a>

 You should use data-toggle attribute with the value as tooltip.

 The title text entered will be shown on the popup tooltip.

 The content to show part is the anchor text similar to a hyperlink.

4. Positioning Tooltips

As you might have noticed in the above example, by default the tooltip will be positioned on top of the content. Bootstrap allows you to position on top, left, right and bottom of the anchor text using data-placement attribute.

 Use data-placement=”top” for top position. This is default so you don’t need to explicitly mention.

 Use data-placement=”bottom” for bottom position.

 Use data-placement=”right” for right position.

 Use data-placement=”left” for left position.

5. Tooltips on Buttons

Let us create four tooltips with different positions on button component.Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

6. Using HTML Content Inside Tooltip

By default only text content is supported inside a tooltip. You can add HTML tags using data-html=”true” attribute. Below is an example of adding strikethrough content inside tooltip using HTML  tags. <a href=”#” data-toggle=”tooltip” data-html=”true” title=”<s>This is a strikethrough tooltip</s>”> Content to Show </a>

As you can see, the content inside title tag is processed with HTML tags when data-html=”true” attribute is set. Below is how it will look like on browser:

7. Tooltip Customizing Options

Tooltips can be further customized using “data-“ attributes.

 Disable CSS fading effect by adding data-animation=”false” attribute.

 Delay show and hide with data-delay attribute.

 Offset the tooltip from the element using data-offset.Bootstrap 4 tooltips will not work on IE8 or lower as Tether is not supported.

 Bootstrap Popovers

The Popover plugin is identical to tooltips;It’s uses the pop-up box that appear when the user clicks on an factor.

Popovers keep faith on the 3rd party library ,Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js bootstrap.bundle.js which contains Popper.js in bunch for popovers to work.

 Creating Popovers with Bootstrap

Popover is a small overlay of content that is used to show secondary information of any element when it is clicked by a user, like those on the iPad.

Step 1: Adding the Popover Markup

To make a popover, you need to add the data-toggle=”popover” attribute to an element. Now those, popover’s title and its content that would display upon trigger or activation can be specified using the title and data-content attribute respectively. <button type=”button” data-toggle=”popover” title=”Popover title” data-content=”Here’s some amazing content.”>Click on toggle popover </button>

Example:-

Click on toggle popoverTips! For performance factor the popovers data-apis are opt in like ,tooltips, means to utilize popovers you must initialized them yourself with popover() method.

Step 2: Triggered the Popovers

Popovers can be triggering via JavaScript — just call the popover() Bootstrap method commonly used with the class, id or any CSS selector of the necessary factor in your JavaScript code. <script> $(document).ready(function(){ $(‘[data-toggle=”popover”]’).popover(); });</script>

Code:-

Output:-

Popover Another popover Large popover Last popover

Note: Click on the buttons to show/hide the popover.

Setting in the Popovers Directions

You can set popovers to reach on right, top, bottom and left sides of an element.

Position of Popovers via Data Attributes

The following example will explain you how to set the direction of popovers via data attributes.

Code:-

Output:-

Popover on top Popover on right Popover on bottom Popover on left

Position of Popovers via Data Attributes

The following example will explain you how to set the direction of popovers via data attributes.

Syntax:-

Options

There are certain options which may be passed to popover() Bootstrap method to customize the functionality of the popover plugin.

You may set up these options either by the use of data attributes or JavaScript. For set the popovers options via data attributes, just append the option name to data- along with the correct value, like data-animation=”false”data-placement=”bottom” etc.

 Methods

These are the classy Bootstrap’s popover methods::- $().popover(options)

This method connect the popover handler to a group of elements. It also permit you to set the options for the popovers so that you can customize them according to your needs.

Syntax:-

Example:-

Customized Popover

Note: Click on the buttons to show/hide the popover..popover(‘show’)

This method reveals an element’s popover.

Syntax:-

Example:-

Popover Example .popover(‘hide’)

This method hides an element’s popover.

Syntax:-

.popover(‘toggle’)

This method toggles an element’s popover.

Syntax:-

.popover(‘enable’)

This method gives an element’s popover the ability to be shown. Popovers are enabled by default.

Syntax:-

.popover(‘disable’)

This method removes the ability for an element’s popover to be shown. The popover will only be efficient to be shown if it is re-enabled.

Syntax:-

.popover(‘update’)

This method updates the position of an element’s popover.

Syntax:-

Leave a Reply

Your email address will not be published. Required fields are marked *