Add a tooltip to your UI with Pure CSS Tooltip — Bootstrap tooltips snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<div class="container">
2 <div class="label">
3 <span class="tooltip-toggle" aria-label="Sample text for your tooltip!" tabindex="0">
4 <svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg">
5 <g fill="#ED3E44" fill-rule="evenodd">
6 <path d="M13.5 27C20.956 27 27 20.956 27 13.5S20.956 0 13.5 0 0 6.044 0 13.5 6.044 27 13.5 27zm0-2C7.15 25 2 19.85 2 13.5S7.15 2 13.5 2 25 7.15 25 13.5 19.85 25 13.5 25z"/>
7 <path d="M12.05 7.64c0-.228.04-.423.12-.585.077-.163.185-.295.32-.397.138-.102.298-.177.48-.227.184-.048.383-.073.598-.073.203 0 .398.025.584.074.186.05.35.126.488.228.14.102.252.234.336.397.084.162.127.357.127.584 0 .22-.043.412-.127.574-.084.163-.196.297-.336.4-.14.106-.302.185-.488.237-.186.053-.38.08-.584.08-.215 0-.414-.027-.597-.08-.182-.05-.342-.13-.48-.235-.135-.104-.243-.238-.32-.4-.08-.163-.12-.355-.12-.576zm-1.02 11.517c.134 0 .275-.013.424-.04.148-.025.284-.08.41-.16.124-.082.23-.198.313-.35.085-.15.127-.354.127-.61v-5.423c0-.238-.042-.43-.127-.57-.084-.144-.19-.254-.318-.332-.13-.08-.267-.13-.415-.153-.148-.024-.286-.036-.414-.036h-.21v-.95h4.195v7.463c0 .256.043.46.127.61.084.152.19.268.314.35.125.08.263.135.414.16.15.027.29.04.418.04h.21v.95H10.82v-.95h.21z"/>
8 </g>
9 </svg>
10 </span>
11 <span class="label-text">Hover over the "i"!</span>
12 </div>
13</div>
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.
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.
Custom tooltips — Bootstrap tooltips snippet
Add a tooltip to your UI with Custom tooltips — Bootstrap tooltips snippet. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.