Tooltips Bootstrap 5Free+ CSS
Add a tooltip to your UI with Custom tooltips — Bootstrap tooltips snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1.2k views18 downloads
gosnippets.com/preview/custom-tooltips-—-bootstrap-tooltips-snippet
Source Code
1 <div id="wrapper">
2 <header>
3 <div class="iconDiv" tooltip="Load file" tabindex="0">
4 <div class="iconSVG">
5 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
6 <path stroke-linecap="round" stroke-linejoin="round" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
7 </svg>
8 </div>
9 </div>
10 <div class="iconDiv" tooltip="Download" tabindex="0">
11 <div class="iconSVG">
12 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
13 <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
14 </svg>
15 </div>
16 </div>
17 <div class="spacer"></div>
18 <div class="divider"></div>
19 <div class="iconDiv" tooltip="Notifications" tabindex="0">
20 <div class="iconSVG">
21 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
22 <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
23 </svg>
24 </div>
25 </div>
26 <div class="iconDiv" tooltip="Log out" tabindex="0">
27 <div class="iconSVG">
28 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
29 <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
30 </svg>
31 </div>
32 </div>
33 </header>
34</div>More Tooltips snippets
Tooltips using Tippy.js
Free Bootstrap 5 tooltip snippet — Tooltips using Tippy.js. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
TooltipsView →
Pure CSS Tooltip — Bootstrap tooltips snippet
Add a tooltip to your UI with Pure CSS Tooltip — Bootstrap tooltips snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
TooltipsView →
Animated CSS Tooltip example
Add a tooltip to your UI with Animated CSS Tooltip example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
TooltipsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.