Last active
December 30, 2021 11:05
-
-
Save mkk360/f34dba0ad2d488059b5f81d39824bb86 to your computer and use it in GitHub Desktop.
Bootstrap 5 Custom Tooltip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ##HTML Markup | |
| <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"> | |
| Tooltip on top | |
| </button> | |
| <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"> | |
| Tooltip on right | |
| </button> | |
| <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"> | |
| Tooltip on bottom | |
| </button> | |
| <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"> | |
| Tooltip on left | |
| </button> | |
| ##CSS | |
| .tooltip-inner { | |
| display: none; | |
| } | |
| ##JavaScript Activation | |
| $(function () { | |
| $('[data-bs-toggle="tooltip"]').tooltip({ | |
| offset: [0,3], | |
| title : `xxxxxx`, | |
| trigger : 'hover', | |
| template: ` | |
| <div class="tooltip" role="tooltip"> | |
| <div class="tooltip-inner"></div> | |
| </div> | |
| ` | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment