ItSolutionStuff.com

How to Add Tooltip in Bootstrap?

By Hardik Savani • November 5, 2023
Bootstrap

Nowdays bootstrap is very famouse framework. If you are macking design using bootstrap then you can easily use tooltip with better design. If you think how to set right side tooltip, or how to set left side tooltip, or how to set top side tooltip and how to set bottom side tooltip then you can set easily. In following example you can i add top side tooltip of button. Mostly we require to add tooltip on icon and button so let's see and if you require to your prject then implement.

Example:

<button class="btn btn-success" rel="tooltip" title="Create new record">Create</button>


<script type="text/javascript">

$(document).ready(function(){

$("[rel=tooltip]").tooltip({ placement: 'top'});

});

</script>

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 9 Bootstrap Auth Scaffolding Tutorial

Read Now →

How to use Bootstrap Datepicker in Laravel?

Read Now →

Angular Bootstrap Collapse Example

Read Now →

How to Use Bootstrap Tooltip in Angular?

Read Now →

How to use Bootstrap Modal in Angular?

Read Now →

Bootstrap Maxlength Validation with Count Remaining Characters Example

Read Now →

JQuery Tooltip Example using JQuery UI Plugin

Read Now →

AngularJS Tooltip using UI Bootstrap tpls HTML Example

Read Now →

Bootstrap Datepicker Change Date Format Example

Read Now →

Bootstrap Colorpicker Example Code

Read Now →

Bootstrap Timepicker using Datetimepicker JS Example

Read Now →

How to Use Collapse Example in Bootstrap?

Read Now →

How to Add Dialog Box in Bootstrap?

Read Now →