
This is a lightweight jQuery/CSS extension to Bootstrap 4 and Bootstrap 3 that adds extra styles (classes) to the native Bootstrap tooltips.
1. Import the necessary jQuery library and Bootstrap 4 (or Bootstrap 3) framework into the document.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
2. Import the Bootstrap Custom Class' JavaScript and CSS files into the document.
<link rel="stylesheet" href="bootstrap-tooltip-custom-class.css"> <script src="bootstrap-tooltip-custom-class.js"></script>
3. Add pre-built custom styles to the Bootstrap tooltips using the data-custom-class
. Available classes:
- .tooltip-primary
- .tooltip-success
- .tooltip-info
- .tooltip-warning
- .tooltip-danger
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-primary" title="Tooltip primary example">Tooltip primary</button> <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-success" title="Tooltip success example">Tooltip success</button> <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-info" title="Tooltip info example">Tooltip info</button> <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-warning" title="Tooltip warning example">Tooltip warning</button> <button class="btn btn-secondary" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-danger" title="Tooltip danger example">Tooltip danger</button>
4. To add a custom CSS class to the tooltip:
$('.btn').tooltip({ customClass: 'my-custom' });
.my-custom { /* your styles here */ }
This awesome jQuery plugin is developed by andreivictor. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 30.04.2018
- Source