loading

BS4 Tooltip

Bootstrap 4 Tooltip

When the mouse pointer is over an element, a little pop-up box known as the Tooltip component emerges.

==== button mukavu ====

How To Create a Tooltip

Add the data-toggle=”tooltip” attribute to an element in order to produce a tooltip.

To provide the text that should appear inside the tooltip, use the title attribute:

				
					<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
				
			

Note: To initialize a tooltip, select the desired element and invoke the tooltip() function using jQuery.

All of the document’s tooltips will be enabled by the code below:

Example

				
					<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
});</script>
				
			

Positioning Tooltips

The tooltip will always show up above the element.

To position the tooltip at the top, bottom, left, or right of the element, use the data-placement attribute:

Example

				
					<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
				
			
Share this Doc

BS4 Tooltip

Or copy link

Explore Topic