|$ curl https://forge-ai.dev/api/markdown?path=docs/components/tooltips
$cat docs/tooltips.md
updated Recently·16 min read·published
Tooltips
Introduction
Tooltips are compact overlay messages that reveal supplementary information on hover or focus. This guide covers production-ready tooltip patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including positioning, arrows, colors, sizes, rich content, icon triggers, and accessibility.
ℹ
info
Always pair tooltips with keyboard-focusable triggers. Use aria-describedby to associate the tooltip text with its trigger for screen readers.
Position Variants
Tooltips positioned above, below, left, and right of the trigger element using CSS data attributes.
positions
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="tooltip-wrap" data-tooltip="Top tooltip"> |
| 3 | <button class="trigger"> |
| 4 | Top |
| 5 | </button> |
| 6 | </div> |
| 7 | <div class="tooltip-wrap bottom" data-tooltip="Bottom tooltip"> |
| 8 | <button class="trigger"> |
| 9 | Bottom |
| 10 | </button> |
| 11 | </div> |
| 12 | <div class="tooltip-wrap left" data-tooltip="Left tooltip"> |
| 13 | <button class="trigger"> |
| 14 | Left |
| 15 | </button> |
| 16 | </div> |
| 17 | <div class="tooltip-wrap right" data-tooltip="Right tooltip"> |
| 18 | <button class="trigger"> |
| 19 | Right |
| 20 | </button> |
| 21 | </div> |
| 22 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:24px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:48px 24px |
| 8 | } |
| 9 | .tooltip-wrap { |
| 10 | position:relative; |
| 11 | display:inline-flex |
| 12 | } |
| 13 | .tooltip-wrap::after { |
| 14 | content:attr(data-tooltip); |
| 15 | position:absolute; |
| 16 | bottom:calc(100% + 8px); |
| 17 | left:50%; |
| 18 | transform:translateX(-50%); |
| 19 | background:#151515; |
| 20 | color:#E0E0E0; |
| 21 | padding:6px 12px; |
| 22 | border-radius:6px; |
| 23 | font-size:11px; |
| 24 | font-family:system-ui, |
| 25 | sans-serif; |
| 26 | white-space:nowrap; |
| 27 | border:1px solid #333; |
| 28 | opacity:0; |
| 29 | pointer-events:none; |
| 30 | transition:opacity .2s ease; |
| 31 | z-index:10 |
| 32 | } |
| 33 | .tooltip-wrap:hover::after { |
| 34 | opacity:1 |
| 35 | } |
| 36 | .tooltip-wrap::before { |
| 37 | content:''; |
| 38 | position:absolute; |
| 39 | bottom:calc(100% + 4px); |
| 40 | left:50%; |
| 41 | transform:translateX(-50%); |
| 42 | border:5px solid transparent; |
| 43 | border-top-color:#333; |
| 44 | opacity:0; |
| 45 | pointer-events:none; |
| 46 | transition:opacity .2s ease; |
| 47 | z-index:10 |
| 48 | } |
| 49 | .tooltip-wrap:hover::before { |
| 50 | opacity:1 |
| 51 | } |
| 52 | .tooltip-wrap.bottom::after { |
| 53 | top:calc(100% + 8px); |
| 54 | bottom:auto |
| 55 | } |
| 56 | .tooltip-wrap.bottom::before { |
| 57 | top:calc(100% + 4px); |
| 58 | bottom:auto; |
| 59 | border-top-color:transparent; |
| 60 | border-bottom-color:#333 |
| 61 | } |
| 62 | .tooltip-wrap.left::after { |
| 63 | top:50%; |
| 64 | bottom:auto; |
| 65 | left:auto; |
| 66 | right:calc(100% + 8px); |
| 67 | transform:translateY(-50%) |
| 68 | } |
| 69 | .tooltip-wrap.left::before { |
| 70 | top:50%; |
| 71 | bottom:auto; |
| 72 | left:auto; |
| 73 | right:calc(100% + 4px); |
| 74 | transform:translateY(-50%); |
| 75 | border-top-color:transparent; |
| 76 | border-right-color:#333 |
| 77 | } |
| 78 | .tooltip-wrap.right::after { |
| 79 | top:50%; |
| 80 | bottom:auto; |
| 81 | left:calc(100% + 8px); |
| 82 | transform:translateY(-50%) |
| 83 | } |
| 84 | .tooltip-wrap.right::before { |
| 85 | top:50%; |
| 86 | bottom:auto; |
| 87 | left:calc(100% + 4px); |
| 88 | transform:translateY(-50%); |
| 89 | border-top-color:transparent; |
| 90 | border-left-color:#333 |
| 91 | } |
| 92 | .trigger { |
| 93 | padding:10px 20px; |
| 94 | border-radius:8px; |
| 95 | font-size:13px; |
| 96 | font-weight:600; |
| 97 | font-family:system-ui, |
| 98 | sans-serif; |
| 99 | cursor:pointer; |
| 100 | border:1px solid #333; |
| 101 | background:#1A1A1A; |
| 102 | color:#E0E0E0; |
| 103 | transition:all .2s |
| 104 | } |
| 105 | .trigger:hover { |
| 106 | background:#222; |
| 107 | border-color:#00FF41; |
| 108 | color:#00FF41 |
| 109 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-6 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex" data-tooltip="Top tooltip"> |
| 3 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 4 | Top |
| 5 | </button> |
| 6 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 7 | Top tooltip |
| 8 | </span> |
| 9 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 10 | </span> |
| 11 | </div> |
| 12 | <div class="group relative inline-flex" data-tooltip="Bottom tooltip"> |
| 13 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 14 | Bottom |
| 15 | </button> |
| 16 | <span class="absolute top-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 17 | Bottom tooltip |
| 18 | </span> |
| 19 | <span class="absolute top-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-b-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 20 | </span> |
| 21 | </div> |
| 22 | <div class="group relative inline-flex" data-tooltip="Left tooltip"> |
| 23 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 24 | Left |
| 25 | </button> |
| 26 | <span class="absolute top-1/2 right-[calc(100%+8px)] -translate-y-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 27 | Left tooltip |
| 28 | </span> |
| 29 | <span class="absolute top-1/2 right-[calc(100%+4px)] -translate-y-1/2 border-[5px] border-transparent border-l-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="group relative inline-flex" data-tooltip="Right tooltip"> |
| 33 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 34 | Right |
| 35 | </button> |
| 36 | <span class="absolute top-1/2 left-[calc(100%+8px)] -translate-y-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 37 | Right tooltip |
| 38 | </span> |
| 39 | <span class="absolute top-1/2 left-[calc(100%+4px)] -translate-y-1/2 border-[5px] border-transparent border-r-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Top tooltip"> |
| 6 | Top |
| 7 | </button> |
| 8 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Bottom tooltip"> |
| 9 | Bottom |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Left tooltip"> |
| 12 | Left |
| 13 | </button> |
| 14 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Right tooltip"> |
| 15 | Right |
| 16 | </button> |
| 17 | </div> |
Arrow Styles
Classic arrow, filled arrow, no arrow, and soft shadow variants for different visual contexts.
arrows
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="tip arrow" data-tooltip="Default arrow"> |
| 3 | Default |
| 4 | </div> |
| 5 | <div class="tip filled" data-tooltip="Filled arrow"> |
| 6 | Filled |
| 7 | </div> |
| 8 | <div class="tip no-arrow" data-tooltip="No arrow"> |
| 9 | No Arrow |
| 10 | </div> |
| 11 | <div class="tip shadow" data-tooltip="Soft shadow"> |
| 12 | Shadow |
| 13 | </div> |
| 14 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:24px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:48px 24px |
| 8 | } |
| 9 | .tip { |
| 10 | position:relative; |
| 11 | display:inline-flex; |
| 12 | padding:10px 20px; |
| 13 | border-radius:8px; |
| 14 | font-size:13px; |
| 15 | font-weight:600; |
| 16 | font-family:system-ui, |
| 17 | sans-serif; |
| 18 | cursor:default; |
| 19 | border:1px solid #333; |
| 20 | background:#1A1A1A; |
| 21 | color:#E0E0E0; |
| 22 | transition:all .2s |
| 23 | } |
| 24 | .tip:hover { |
| 25 | color:#00FF41; |
| 26 | border-color:#00FF41 |
| 27 | } |
| 28 | .tip::after { |
| 29 | content:attr(data-tooltip); |
| 30 | position:absolute; |
| 31 | bottom:calc(100% + 8px); |
| 32 | left:50%; |
| 33 | transform:translateX(-50%); |
| 34 | background:#151515; |
| 35 | color:#E0E0E0; |
| 36 | padding:6px 12px; |
| 37 | border-radius:6px; |
| 38 | font-size:11px; |
| 39 | font-family:system-ui, |
| 40 | sans-serif; |
| 41 | white-space:nowrap; |
| 42 | border:1px solid #333; |
| 43 | opacity:0; |
| 44 | pointer-events:none; |
| 45 | transition:opacity .2s ease; |
| 46 | z-index:10 |
| 47 | } |
| 48 | .tip:hover::after { |
| 49 | opacity:1 |
| 50 | } |
| 51 | .tip::before { |
| 52 | content:''; |
| 53 | position:absolute; |
| 54 | bottom:calc(100% + 4px); |
| 55 | left:50%; |
| 56 | transform:translateX(-50%); |
| 57 | border:5px solid transparent; |
| 58 | border-top-color:#333; |
| 59 | opacity:0; |
| 60 | pointer-events:none; |
| 61 | transition:opacity .2s ease; |
| 62 | z-index:10 |
| 63 | } |
| 64 | .tip:hover::before { |
| 65 | opacity:1 |
| 66 | } |
| 67 | .tip.filled::after { |
| 68 | background:#00FF41; |
| 69 | color:#0A0A0A; |
| 70 | border-color:#00FF41 |
| 71 | } |
| 72 | .tip.filled::before { |
| 73 | border-top-color:#00FF41 |
| 74 | } |
| 75 | .tip.no-arrow::before { |
| 76 | display:none |
| 77 | } |
| 78 | .tip.shadow::after { |
| 79 | box-shadow:0 8px 24px rgba(0, |
| 80 | 0, |
| 81 | 0, |
| 82 | .5) |
| 83 | } |
| 84 | .tip.shadow::before { |
| 85 | border-top-color:#151515 |
| 86 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-6 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Default arrow"> |
| 3 | Default |
| 4 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 5 | Default arrow |
| 6 | </span> |
| 7 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Filled arrow"> |
| 11 | Filled |
| 12 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#00FF41] text-[#0A0A0A] border border-[#00FF41] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 13 | Filled arrow |
| 14 | </span> |
| 15 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#00FF41] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="No arrow"> |
| 19 | No Arrow |
| 20 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 21 | No arrow |
| 22 | </span> |
| 23 | </div> |
| 24 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Soft shadow"> |
| 25 | Shadow |
| 26 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] shadow-[0_8px_24px_rgba(0,0,0,0.5)] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 27 | Soft shadow |
| 28 | </span> |
| 29 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#151515] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 30 | </span> |
| 31 | </div> |
| 32 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0}.tooltip.filled .tooltip-inner{background:#00FF41 !important;color:#0A0A0A !important}.tooltip.filled .tooltip-arrow::before{border-top-color:#00FF41 !important} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" title="Default arrow"> |
| 6 | Default |
| 7 | </button> |
| 8 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="filled" title="Filled arrow"> |
| 9 | Filled |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-html="true" title="<span class='text-success'> |
| 12 | No arrow style |
| 13 | </span> |
| 14 | ">No Arrow |
| 15 | </button> |
| 16 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" title="Soft shadow"> |
| 17 | Shadow |
| 18 | </button> |
| 19 | </div> |
Color Variants
Semantic tooltip colors for success, info, warning, and danger states.
colors
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="tip success" data-tooltip="Operation successful"> |
| 3 | Success |
| 4 | </div> |
| 5 | <div class="tip info" data-tooltip="Additional context"> |
| 6 | Info |
| 7 | </div> |
| 8 | <div class="tip warning" data-tooltip="Proceed with caution"> |
| 9 | Warning |
| 10 | </div> |
| 11 | <div class="tip danger" data-tooltip="Critical error"> |
| 12 | Danger |
| 13 | </div> |
| 14 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:24px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:48px 24px |
| 8 | } |
| 9 | .tip { |
| 10 | position:relative; |
| 11 | display:inline-flex; |
| 12 | padding:10px 20px; |
| 13 | border-radius:8px; |
| 14 | font-size:13px; |
| 15 | font-weight:600; |
| 16 | font-family:system-ui, |
| 17 | sans-serif; |
| 18 | cursor:default; |
| 19 | border:1px solid #333; |
| 20 | background:#1A1A1A; |
| 21 | color:#E0E0E0; |
| 22 | transition:all .2s |
| 23 | } |
| 24 | .tip:hover { |
| 25 | border-color:currentColor |
| 26 | } |
| 27 | .tip::after { |
| 28 | content:attr(data-tooltip); |
| 29 | position:absolute; |
| 30 | bottom:calc(100% + 8px); |
| 31 | left:50%; |
| 32 | transform:translateX(-50%); |
| 33 | padding:6px 12px; |
| 34 | border-radius:6px; |
| 35 | font-size:11px; |
| 36 | font-family:system-ui, |
| 37 | sans-serif; |
| 38 | white-space:nowrap; |
| 39 | opacity:0; |
| 40 | pointer-events:none; |
| 41 | transition:opacity .2s ease; |
| 42 | z-index:10; |
| 43 | border:1px solid currentColor |
| 44 | } |
| 45 | .tip:hover::after { |
| 46 | opacity:1 |
| 47 | } |
| 48 | .tip::before { |
| 49 | content:''; |
| 50 | position:absolute; |
| 51 | bottom:calc(100% + 4px); |
| 52 | left:50%; |
| 53 | transform:translateX(-50%); |
| 54 | border:5px solid transparent; |
| 55 | opacity:0; |
| 56 | pointer-events:none; |
| 57 | transition:opacity .2s ease; |
| 58 | z-index:10 |
| 59 | } |
| 60 | .tip:hover::before { |
| 61 | opacity:1 |
| 62 | } |
| 63 | .tip.success { |
| 64 | color:#00FF41 |
| 65 | } |
| 66 | .tip.success::after { |
| 67 | background:rgba(0, |
| 68 | 255, |
| 69 | 65, |
| 70 | .1); |
| 71 | color:#00FF41 |
| 72 | } |
| 73 | .tip.success::before { |
| 74 | border-top-color:#00FF41 |
| 75 | } |
| 76 | .tip.info { |
| 77 | color:#3B82F6 |
| 78 | } |
| 79 | .tip.info::after { |
| 80 | background:rgba(59, |
| 81 | 130, |
| 82 | 246, |
| 83 | .1); |
| 84 | color:#3B82F6 |
| 85 | } |
| 86 | .tip.info::before { |
| 87 | border-top-color:#3B82F6 |
| 88 | } |
| 89 | .tip.warning { |
| 90 | color:#EAB308 |
| 91 | } |
| 92 | .tip.warning::after { |
| 93 | background:rgba(234, |
| 94 | 179, |
| 95 | 8, |
| 96 | .1); |
| 97 | color:#EAB308 |
| 98 | } |
| 99 | .tip.warning::before { |
| 100 | border-top-color:#EAB308 |
| 101 | } |
| 102 | .tip.danger { |
| 103 | color:#EF4444 |
| 104 | } |
| 105 | .tip.danger::after { |
| 106 | background:rgba(239, |
| 107 | 68, |
| 108 | 68, |
| 109 | .1); |
| 110 | color:#EF4444 |
| 111 | } |
| 112 | .tip.danger::before { |
| 113 | border-top-color:#EF4444 |
| 114 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-6 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#00FF41] border border-[#333] hover:border-[#00FF41] transition-all cursor-default" data-tooltip="Operation successful"> |
| 3 | Success |
| 4 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[rgba(0,255,65,0.1)] text-[#00FF41] border border-[#00FF41] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 5 | Operation successful |
| 6 | </span> |
| 7 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#00FF41] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#3B82F6] border border-[#333] hover:border-[#3B82F6] transition-all cursor-default" data-tooltip="Additional context"> |
| 11 | Info |
| 12 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[rgba(59,130,246,0.1)] text-[#3B82F6] border border-[#3B82F6] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 13 | Additional context |
| 14 | </span> |
| 15 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#3B82F6] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#EAB308] border border-[#333] hover:border-[#EAB308] transition-all cursor-default" data-tooltip="Proceed with caution"> |
| 19 | Warning |
| 20 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[rgba(234,179,8,0.1)] text-[#EAB308] border border-[#EAB308] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 21 | Proceed with caution |
| 22 | </span> |
| 23 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#EAB308] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#EF4444] border border-[#333] hover:border-[#EF4444] transition-all cursor-default" data-tooltip="Critical error"> |
| 27 | Danger |
| 28 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[rgba(239,68,68,0.1)] text-[#EF4444] border border-[#EF4444] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 29 | Critical error |
| 30 | </span> |
| 31 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#EF4444] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 32 | </span> |
| 33 | </div> |
| 34 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0}.tooltip-success .tooltip-inner{background:#00FF41 !important;color:#0A0A0A !important}.tooltip-success .tooltip-arrow::before{border-top-color:#00FF41 !important}.tooltip-info .tooltip-inner{background:#3B82F6 !important;color:#fff !important}.tooltip-info .tooltip-arrow::before{border-top-color:#3B82F6 !important}.tooltip-warning .tooltip-inner{background:#EAB308 !important;color:#0A0A0A !important}.tooltip-warning .tooltip-arrow::before{border-top-color:#EAB308 !important}.tooltip-danger .tooltip-inner{background:#EF4444 !important;color:#fff !important}.tooltip-danger .tooltip-arrow::before{border-top-color:#EF4444 !important} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-success" title="Operation successful"> |
| 6 | Success |
| 7 | </button> |
| 8 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-info" title="Additional context"> |
| 9 | Info |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-warning" title="Proceed with caution"> |
| 12 | Warning |
| 13 | </button> |
| 14 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger" title="Critical error"> |
| 15 | Danger |
| 16 | </button> |
| 17 | </div> |
Sizes
Compact, default, and large tooltips for different information density needs.
sizes
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="tip sm" data-tooltip="Compact hint"> |
| 3 | Small |
| 4 | </div> |
| 5 | <div class="tip md" data-tooltip="Default tooltip size"> |
| 6 | Default |
| 7 | </div> |
| 8 | <div class="tip lg" data-tooltip="Large tooltip with more space"> |
| 9 | Large |
| 10 | </div> |
| 11 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:24px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:48px 24px |
| 8 | } |
| 9 | .tip { |
| 10 | position:relative; |
| 11 | display:inline-flex; |
| 12 | padding:10px 20px; |
| 13 | border-radius:8px; |
| 14 | font-size:13px; |
| 15 | font-weight:600; |
| 16 | font-family:system-ui, |
| 17 | sans-serif; |
| 18 | cursor:default; |
| 19 | border:1px solid #333; |
| 20 | background:#1A1A1A; |
| 21 | color:#E0E0E0; |
| 22 | transition:all .2s |
| 23 | } |
| 24 | .tip:hover { |
| 25 | border-color:#00FF41; |
| 26 | color:#00FF41 |
| 27 | } |
| 28 | .tip::after { |
| 29 | content:attr(data-tooltip); |
| 30 | position:absolute; |
| 31 | bottom:calc(100% + 8px); |
| 32 | left:50%; |
| 33 | transform:translateX(-50%); |
| 34 | background:#151515; |
| 35 | color:#E0E0E0; |
| 36 | border:1px solid #333; |
| 37 | border-radius:6px; |
| 38 | font-family:system-ui, |
| 39 | sans-serif; |
| 40 | white-space:nowrap; |
| 41 | opacity:0; |
| 42 | pointer-events:none; |
| 43 | transition:opacity .2s ease; |
| 44 | z-index:10 |
| 45 | } |
| 46 | .tip:hover::after { |
| 47 | opacity:1 |
| 48 | } |
| 49 | .tip::before { |
| 50 | content:''; |
| 51 | position:absolute; |
| 52 | bottom:calc(100% + 4px); |
| 53 | left:50%; |
| 54 | transform:translateX(-50%); |
| 55 | border:5px solid transparent; |
| 56 | border-top-color:#333; |
| 57 | opacity:0; |
| 58 | pointer-events:none; |
| 59 | transition:opacity .2s ease; |
| 60 | z-index:10 |
| 61 | } |
| 62 | .tip:hover::before { |
| 63 | opacity:1 |
| 64 | } |
| 65 | .tip.sm::after { |
| 66 | padding:3px 8px; |
| 67 | font-size:9px |
| 68 | } |
| 69 | .tip.md::after { |
| 70 | padding:6px 12px; |
| 71 | font-size:11px |
| 72 | } |
| 73 | .tip.lg::after { |
| 74 | padding:10px 16px; |
| 75 | font-size:13px; |
| 76 | min-width:180px; |
| 77 | text-align:center |
| 78 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-6 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Compact hint"> |
| 3 | Small |
| 4 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-2 py-0.5 rounded text-[9px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 5 | Compact hint |
| 6 | </span> |
| 7 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Default tooltip size"> |
| 11 | Default |
| 12 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 13 | Default tooltip size |
| 14 | </span> |
| 15 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="group relative inline-flex px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all cursor-default" data-tooltip="Large tooltip with more space"> |
| 19 | Large |
| 20 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-4 py-2.5 rounded-md text-[13px] min-w-[180px] text-center bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 21 | Large tooltip with more space |
| 22 | </span> |
| 23 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0}.tooltip-lg .tooltip-inner{padding:.625rem 1rem;font-size:.8125rem} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<span class='fs-10'> |
| 6 | Compact hint |
| 7 | </span> |
| 8 | ">Small |
| 9 | </button> |
| 10 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" title="Default tooltip size"> |
| 11 | Default |
| 12 | </button> |
| 13 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-lg" title="Large tooltip with more space"> |
| 14 | Large |
| 15 | </button> |
| 16 | </div> |
Rich Content
Tooltips with headers, body text, footer metadata, badges, and inline SVG icons.
rich
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="rich-tip"> |
| 3 | <button class="trigger"> |
| 4 | System status |
| 5 | </button> |
| 6 | <div class="rich-content"> |
| 7 | <div class="rich-header"> |
| 8 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="14" height="14"> |
| 9 | <circle cx="12" cy="12" r="10"/> |
| 10 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 11 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 12 | </svg> |
| 13 | <span> |
| 14 | Information |
| 15 | </span> |
| 16 | </div> |
| 17 | <p class="rich-body"> |
| 18 | This tooltip supports multiple lines of content with detailed explanations and visual elements. |
| 19 | </p> |
| 20 | <div class="rich-footer"> |
| 21 | <span class="badge"> |
| 22 | Updated |
| 23 | </span> |
| 24 | <span> |
| 25 | 2 mins ago |
| 26 | </span> |
| 27 | </div> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="rich-tip left"> |
| 31 | <button class="trigger"> |
| 32 | Security |
| 33 | </button> |
| 34 | <div class="rich-content"> |
| 35 | <div class="rich-header"> |
| 36 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="14" height="14"> |
| 37 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 38 | </svg> |
| 39 | <span> |
| 40 | Status |
| 41 | </span> |
| 42 | </div> |
| 43 | <p class="rich-body"> |
| 44 | All systems operational. No incidents reported in the last 24 hours. |
| 45 | </p> |
| 46 | </div> |
| 47 | </div> |
| 48 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | gap:40px; |
| 4 | align-items:flex-start; |
| 5 | justify-content:center; |
| 6 | padding:48px 24px |
| 7 | } |
| 8 | .rich-tip { |
| 9 | position:relative; |
| 10 | display:inline-flex |
| 11 | } |
| 12 | .rich-content { |
| 13 | position:absolute; |
| 14 | bottom:calc(100% + 12px); |
| 15 | left:50%; |
| 16 | transform:translateX(-50%); |
| 17 | background:#151515; |
| 18 | color:#E0E0E0; |
| 19 | padding:14px; |
| 20 | border-radius:8px; |
| 21 | font-size:11px; |
| 22 | font-family:system-ui, |
| 23 | sans-serif; |
| 24 | border:1px solid #333; |
| 25 | min-width:240px; |
| 26 | opacity:0; |
| 27 | pointer-events:none; |
| 28 | transition:opacity .2s ease; |
| 29 | z-index:10; |
| 30 | box-shadow:0 8px 24px rgba(0, |
| 31 | 0, |
| 32 | 0, |
| 33 | .4) |
| 34 | } |
| 35 | .rich-tip:hover .rich-content { |
| 36 | opacity:1 |
| 37 | } |
| 38 | .rich-tip.left .rich-content { |
| 39 | left:auto; |
| 40 | right:calc(100% + 12px); |
| 41 | bottom:auto; |
| 42 | top:50%; |
| 43 | transform:translateY(-50%) |
| 44 | } |
| 45 | .rich-header { |
| 46 | display:flex; |
| 47 | align-items:center; |
| 48 | gap:6px; |
| 49 | font-weight:600; |
| 50 | font-size:12px; |
| 51 | margin-bottom:8px; |
| 52 | padding-bottom:8px; |
| 53 | border-bottom:1px solid #2A2A2A |
| 54 | } |
| 55 | .rich-body { |
| 56 | color:#A0A0A0; |
| 57 | line-height:1.5; |
| 58 | margin-bottom:8px |
| 59 | } |
| 60 | .rich-footer { |
| 61 | display:flex; |
| 62 | align-items:center; |
| 63 | gap:8px; |
| 64 | font-size:10px; |
| 65 | color:#808080; |
| 66 | border-top:1px solid #2A2A2A; |
| 67 | padding-top:8px |
| 68 | } |
| 69 | .badge { |
| 70 | background:rgba(0, |
| 71 | 255, |
| 72 | 65, |
| 73 | .1); |
| 74 | color:#00FF41; |
| 75 | padding:2px 6px; |
| 76 | border-radius:4px; |
| 77 | font-size:9px; |
| 78 | border:1px solid rgba(0, |
| 79 | 255, |
| 80 | 65, |
| 81 | .2) |
| 82 | } |
| 83 | .trigger { |
| 84 | padding:10px 20px; |
| 85 | border-radius:8px; |
| 86 | font-size:13px; |
| 87 | font-weight:600; |
| 88 | font-family:system-ui, |
| 89 | sans-serif; |
| 90 | cursor:pointer; |
| 91 | border:1px solid #333; |
| 92 | background:#1A1A1A; |
| 93 | color:#E0E0E0; |
| 94 | transition:all .2s |
| 95 | } |
| 96 | .trigger:hover { |
| 97 | background:#222; |
| 98 | border-color:#00FF41; |
| 99 | color:#00FF41 |
| 100 | } |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-10 items-start justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex"> |
| 3 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 4 | System status |
| 5 | </button> |
| 6 | <div class="absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 min-w-[240px] p-3.5 rounded-lg bg-[#151515] text-[#E0E0E0] border border-[#333] shadow-[0_8px_24px_rgba(0,0,0,0.4)] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 7 | <div class="flex items-center gap-1.5 text-xs font-semibold pb-2 mb-2 border-b border-[#2A2A2A]"> |
| 8 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2"> |
| 9 | <circle cx="12" cy="12" r="10"/> |
| 10 | <line x1="12" y1="16" x2="12" y2="12"/> |
| 11 | <line x1="12" y1="8" x2="12.01" y2="8"/> |
| 12 | </svg> |
| 13 | Information |
| 14 | </div> |
| 15 | <p class="text-[11px] text-[#A0A0A0] leading-relaxed mb-2"> |
| 16 | This tooltip supports multiple lines of content with detailed explanations and visual elements. |
| 17 | </p> |
| 18 | <div class="flex items-center gap-2 text-[10px] text-[#808080] pt-2 border-t border-[#2A2A2A]"> |
| 19 | <span class="px-1.5 py-0.5 rounded text-[9px] bg-[rgba(0,255,65,0.1)] text-[#00FF41] border border-[rgba(0,255,65,0.2)]"> |
| 20 | Updated |
| 21 | </span> |
| 22 | <span> |
| 23 | 2 mins ago |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
| 28 | <div class="group relative inline-flex"> |
| 29 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 30 | Security |
| 31 | </button> |
| 32 | <div class="absolute right-[calc(100%+12px)] top-1/2 -translate-y-1/2 min-w-[220px] p-3.5 rounded-lg bg-[#151515] text-[#E0E0E0] border border-[#333] shadow-[0_8px_24px_rgba(0,0,0,0.4)] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 33 | <div class="flex items-center gap-1.5 text-xs font-semibold pb-2 mb-2 border-b border-[#2A2A2A]"> |
| 34 | <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2"> |
| 35 | <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> |
| 36 | </svg> |
| 37 | Status |
| 38 | </div> |
| 39 | <p class="text-[11px] text-[#A0A0A0] leading-relaxed"> |
| 40 | All systems operational. No incidents reported in the last 24 hours. |
| 41 | </p> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0}.tooltip-rich .tooltip-inner{max-width:280px;padding:14px;text-align:left;background:#151515;border:1px solid #333}.tooltip-rich .tooltip-arrow::before{border-top-color:#333 !important} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-5 align-items-start justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="tooltip-rich" title="<div class='d-flex align-items-center gap-2 pb-2 mb-2 border-bottom border-secondary'> |
| 6 | <svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='#00FF41' stroke-width='2'> |
| 7 | <circle cx='12' cy='12' r='10'/> |
| 8 | <line x1='12' y1='16' x2='12' y2='12'/> |
| 9 | <line x1='12' y1='8' x2='12.01' y2='8'/> |
| 10 | </svg> |
| 11 | <strong> |
| 12 | Information |
| 13 | </strong> |
| 14 | </div> |
| 15 | <p class='mb-2 text-secondary small'> |
| 16 | This tooltip supports multiple lines of content with detailed explanations and visual elements. |
| 17 | </p> |
| 18 | <div class='d-flex align-items-center gap-2 pt-2 border-top border-secondary'> |
| 19 | <span class='badge text-bg-success' style='background:#00FF41;color:#0A0A0A'> |
| 20 | Updated |
| 21 | </span> |
| 22 | <small class='text-secondary'> |
| 23 | 2 mins ago |
| 24 | </small> |
| 25 | </div> |
| 26 | ">System status |
| 27 | </button> |
| 28 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-custom-class="tooltip-rich" data-bs-placement="left" title="<div class='d-flex align-items-center gap-2 pb-2 mb-2 border-bottom border-secondary'> |
| 29 | <svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='#00FF41' stroke-width='2'> |
| 30 | <path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/> |
| 31 | </svg> |
| 32 | <strong> |
| 33 | Status |
| 34 | </strong> |
| 35 | </div> |
| 36 | <p class='text-secondary small'> |
| 37 | All systems operational. No incidents reported in the last 24 hours. |
| 38 | </p> |
| 39 | ">Security |
| 40 | </button> |
| 41 | </div> |
Icon Triggers
Compact icon buttons that reveal labels on hover. Essential for toolbars and navigation.
icons
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="icon-tip" data-tooltip="Copy"> |
| 3 | <button aria-label="Copy"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 5 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 6 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | </div> |
| 10 | <div class="icon-tip" data-tooltip="Settings"> |
| 11 | <button aria-label="Settings"> |
| 12 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 13 | <circle cx="12" cy="12" r="3"/> |
| 14 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 15 | </svg> |
| 16 | </button> |
| 17 | </div> |
| 18 | <div class="icon-tip" data-tooltip="Delete"> |
| 19 | <button aria-label="Delete"> |
| 20 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 21 | <polyline points="3 6 5 6 21 6"/> |
| 22 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 23 | </svg> |
| 24 | </button> |
| 25 | </div> |
| 26 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | gap:16px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:48px 24px |
| 7 | } |
| 8 | .icon-tip { |
| 9 | position:relative; |
| 10 | display:inline-flex |
| 11 | } |
| 12 | .icon-tip button { |
| 13 | display:inline-flex; |
| 14 | align-items:center; |
| 15 | justify-content:center; |
| 16 | width:40px; |
| 17 | height:40px; |
| 18 | border-radius:8px; |
| 19 | border:1px solid #333; |
| 20 | background:#1A1A1A; |
| 21 | color:#A0A0A0; |
| 22 | cursor:pointer; |
| 23 | transition:all .2s |
| 24 | } |
| 25 | .icon-tip button:hover { |
| 26 | background:#222; |
| 27 | border-color:#00FF41; |
| 28 | color:#00FF41 |
| 29 | } |
| 30 | .icon-tip::after { |
| 31 | content:attr(data-tooltip); |
| 32 | position:absolute; |
| 33 | bottom:calc(100% + 8px); |
| 34 | left:50%; |
| 35 | transform:translateX(-50%); |
| 36 | background:#151515; |
| 37 | color:#E0E0E0; |
| 38 | padding:4px 10px; |
| 39 | border-radius:6px; |
| 40 | font-size:11px; |
| 41 | font-family:system-ui, |
| 42 | sans-serif; |
| 43 | white-space:nowrap; |
| 44 | border:1px solid #333; |
| 45 | opacity:0; |
| 46 | pointer-events:none; |
| 47 | transition:opacity .2s ease; |
| 48 | z-index:10 |
| 49 | } |
| 50 | .icon-tip:hover::after { |
| 51 | opacity:1 |
| 52 | } |
| 53 | .icon-tip::before { |
| 54 | content:''; |
| 55 | position:absolute; |
| 56 | bottom:calc(100% + 4px); |
| 57 | left:50%; |
| 58 | transform:translateX(-50%); |
| 59 | border:5px solid transparent; |
| 60 | border-top-color:#333; |
| 61 | opacity:0; |
| 62 | pointer-events:none; |
| 63 | transition:opacity .2s ease; |
| 64 | z-index:10 |
| 65 | } |
| 66 | .icon-tip:hover::before { |
| 67 | opacity:1 |
| 68 | } |
untitled.html
HTML
| 1 | <div class="flex gap-4 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex" data-tooltip="Copy"> |
| 3 | <button aria-label="Copy" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 4 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 6 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-2.5 py-1 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 10 | Copy |
| 11 | </span> |
| 12 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="group relative inline-flex" data-tooltip="Settings"> |
| 16 | <button aria-label="Settings" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 17 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <circle cx="12" cy="12" r="3"/> |
| 19 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 20 | </svg> |
| 21 | </button> |
| 22 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-2.5 py-1 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 23 | Settings |
| 24 | </span> |
| 25 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 26 | </span> |
| 27 | </div> |
| 28 | <div class="group relative inline-flex" data-tooltip="Delete"> |
| 29 | <button aria-label="Delete" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 30 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 31 | <polyline points="3 6 5 6 21 6"/> |
| 32 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 33 | </svg> |
| 34 | </button> |
| 35 | <span class="absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-2.5 py-1 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 36 | Delete |
| 37 | </span> |
| 38 | <span class="absolute bottom-[calc(100%+4px)] left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-[#333] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> |
| 39 | </span> |
| 40 | </div> |
| 41 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0} |
| 3 | </style> |
| 4 | <div class="d-flex gap-3 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" title="Copy" aria-label="Copy"> |
| 6 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 7 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 8 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" title="Settings" aria-label="Settings"> |
| 12 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 13 | <circle cx="12" cy="12" r="3"/> |
| 14 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 15 | </svg> |
| 16 | </button> |
| 17 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" title="Delete" aria-label="Delete"> |
| 18 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 19 | <polyline points="3 6 5 6 21 6"/> |
| 20 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 21 | </svg> |
| 22 | </button> |
| 23 | </div> |
Interactive Delay
Tooltips with show/hide delay for better UX — instant on desktop, delayed on mobile.
delay
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="delay-tip" data-delay="200"> |
| 3 | <button class="trigger"> |
| 4 | 200ms delay |
| 5 | </button> |
| 6 | <span class="delay-msg"> |
| 7 | Appears after 200ms |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="delay-tip" data-delay="500"> |
| 11 | <button class="trigger"> |
| 12 | 500ms delay |
| 13 | </button> |
| 14 | <span class="delay-msg"> |
| 15 | Appears after 500ms |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="delay-tip" data-duration="3000"> |
| 19 | <button class="trigger"> |
| 20 | Auto-hide 3s |
| 21 | </button> |
| 22 | <span class="delay-msg"> |
| 23 | Hides after 3 seconds |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | display:flex; |
| 3 | flex-wrap:wrap; |
| 4 | gap:24px; |
| 5 | align-items:center; |
| 6 | justify-content:center; |
| 7 | padding:48px 24px |
| 8 | } |
| 9 | .delay-tip { |
| 10 | position:relative; |
| 11 | display:inline-flex |
| 12 | } |
| 13 | .delay-msg { |
| 14 | position:absolute; |
| 15 | bottom:calc(100% + 8px); |
| 16 | left:50%; |
| 17 | transform:translateX(-50%); |
| 18 | background:#151515; |
| 19 | color:#E0E0E0; |
| 20 | padding:6px 12px; |
| 21 | border-radius:6px; |
| 22 | font-size:11px; |
| 23 | font-family:system-ui, |
| 24 | sans-serif; |
| 25 | white-space:nowrap; |
| 26 | border:1px solid #333; |
| 27 | opacity:0; |
| 28 | pointer-events:none; |
| 29 | transition:opacity .3s ease; |
| 30 | z-index:10 |
| 31 | } |
| 32 | .delay-tip:hover .delay-msg { |
| 33 | opacity:1 |
| 34 | } |
| 35 | .trigger { |
| 36 | padding:10px 20px; |
| 37 | border-radius:8px; |
| 38 | font-size:13px; |
| 39 | font-weight:600; |
| 40 | font-family:system-ui, |
| 41 | sans-serif; |
| 42 | cursor:pointer; |
| 43 | border:1px solid #333; |
| 44 | background:#1A1A1A; |
| 45 | color:#E0E0E0; |
| 46 | transition:all .2s |
| 47 | } |
| 48 | .trigger:hover { |
| 49 | background:#222; |
| 50 | border-color:#00FF41; |
| 51 | color:#00FF41 |
| 52 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.delay-tip').forEach(el=>{const msg=el.querySelector('.delay-msg');const delay=parseInt(el.dataset.delay)||0;const duration=parseInt(el.dataset.duration)||0;let showTimer,hideTimer;el.addEventListener('mouseenter',()=>{clearTimeout(showTimer);clearTimeout(hideTimer);showTimer=setTimeout(()=>{msg.style.opacity='1';if(duration){hideTimer=setTimeout(()=>{msg.style.opacity='0'},duration)}},delay)});el.addEventListener('mouseleave',()=>{clearTimeout(showTimer);clearTimeout(hideTimer);msg.style.opacity='0'})}) |
untitled.html
HTML
| 1 | <div class="flex flex-wrap gap-6 items-center justify-center p-12 bg-[#0A0A0A]" data-delay-wrapper> |
| 2 | <div class="group relative inline-flex" data-delay="200"> |
| 3 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 4 | 200ms delay |
| 5 | </button> |
| 6 | <span class="delay-msg absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 transition-opacity pointer-events-none z-10"> |
| 7 | Appears after 200ms |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="group relative inline-flex" data-delay="500"> |
| 11 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 12 | 500ms delay |
| 13 | </button> |
| 14 | <span class="delay-msg absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 transition-opacity pointer-events-none z-10"> |
| 15 | Appears after 500ms |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="group relative inline-flex" data-duration="3000"> |
| 19 | <button class="px-5 py-2.5 rounded-lg text-[13px] font-semibold bg-[#1A1A1A] text-[#E0E0E0] border border-[#333] hover:border-[#00FF41] hover:text-[#00FF41] transition-all"> |
| 20 | Auto-hide 3s |
| 21 | </button> |
| 22 | <span class="delay-msg absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] opacity-0 transition-opacity pointer-events-none z-10"> |
| 23 | Hides after 3 seconds |
| 24 | </span> |
| 25 | </div> |
| 26 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0} |
| 3 | </style> |
| 4 | <div class="d-flex flex-wrap gap-4 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-delay='{"show":200,"hide":100}' title="Appears after 200ms"> |
| 6 | 200ms delay |
| 7 | </button> |
| 8 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-delay='{"show":500,"hide":100}' title="Appears after 500ms"> |
| 9 | 500ms delay |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary" data-bs-toggle="tooltip" data-bs-delay='{"show":0,"hide":3000}' title="Hides after 3 seconds"> |
| 12 | Auto-hide 3s |
| 13 | </button> |
| 14 | </div> |
Accessibility
Tooltips must be discoverable and readable for all users. A tooltip that only works on hover fails keyboard and screen-reader users.
- Attach tooltips to focusable triggers only — use <button> or <a> elements, not divs.
- Link the tooltip text to the trigger with aria-describedby so screen readers announce it.
- Ensure the tooltip is visible on keyboard focus, not only on mouse hover.
- Keep tooltip text concise; move complex content to a popover, modal, or inline help panel.
- Maintain color contrast ratios of at least 4.5:1 between tooltip text and background.
- Icon-only triggers require an aria-label on the button and a descriptive tooltip.
- Avoid relying solely on title attributes; they are inconsistent across browsers and screen readers.
Motion
Subtle motion makes a tooltip feel like it originates from the trigger. Fade the overlay in while translating it a few pixels toward the trigger, and let the arrow settle with the same easing curve. Keep the duration short — around 200 ms — so the hint feels instant, not decorative.
📝
note
Respect prefers-reduced-motion. When the user has requested reduced motion, skip the translate/scale and switch to an instant opacity fade or disable the transition entirely.
motion
Live
untitled.html
HTML
| 1 | <div class="motion-demo"> |
| 2 | <div class="motion-tip"> |
| 3 | <button class="motion-btn" aria-label="Copy"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 5 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 6 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | <span class="motion-box"> |
| 10 | Copy |
| 11 | <span class="motion-arrow"> |
| 12 | </span> |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="motion-tip"> |
| 16 | <button class="motion-btn" aria-label="Save"> |
| 17 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 18 | <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/> |
| 19 | <polyline points="17 21 17 13 7 13 7 21"/> |
| 20 | <polyline points="7 3 7 8 15 8"/> |
| 21 | </svg> |
| 22 | </button> |
| 23 | <span class="motion-box"> |
| 24 | Save |
| 25 | <span class="motion-arrow"> |
| 26 | </span> |
| 27 | </span> |
| 28 | </div> |
| 29 | <div class="motion-tip"> |
| 30 | <button class="motion-btn" aria-label="Delete"> |
| 31 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"> |
| 32 | <polyline points="3 6 5 6 21 6"/> |
| 33 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 34 | </svg> |
| 35 | </button> |
| 36 | <span class="motion-box"> |
| 37 | Delete |
| 38 | <span class="motion-arrow"> |
| 39 | </span> |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.css
CSS
| 1 | .motion-demo { |
| 2 | display:flex; |
| 3 | gap:16px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:48px 24px; |
| 7 | background:#0A0A0A |
| 8 | } |
| 9 | .motion-tip { |
| 10 | position:relative; |
| 11 | display:inline-flex |
| 12 | } |
| 13 | .motion-btn { |
| 14 | display:inline-flex; |
| 15 | align-items:center; |
| 16 | justify-content:center; |
| 17 | width:40px; |
| 18 | height:40px; |
| 19 | border-radius:8px; |
| 20 | border:1px solid #333; |
| 21 | background:#1A1A1A; |
| 22 | color:#A0A0A0; |
| 23 | cursor:pointer; |
| 24 | transition:all .2s ease |
| 25 | } |
| 26 | .motion-btn:hover { |
| 27 | background:#222; |
| 28 | border-color:#00FF41; |
| 29 | color:#00FF41 |
| 30 | } |
| 31 | .motion-box { |
| 32 | position:absolute; |
| 33 | bottom:calc(100% + 10px); |
| 34 | left:50%; |
| 35 | transform:translateX(-50%) translateY(6px) scale(.96); |
| 36 | padding:6px 12px; |
| 37 | border-radius:6px; |
| 38 | font-size:11px; |
| 39 | font-family:system-ui, |
| 40 | sans-serif; |
| 41 | white-space:nowrap; |
| 42 | background:#151515; |
| 43 | color:#E0E0E0; |
| 44 | border:1px solid #333; |
| 45 | opacity:0; |
| 46 | pointer-events:none; |
| 47 | transition:opacity .2s cubic-bezier(.16, |
| 48 | 1, |
| 49 | .3, |
| 50 | 1), |
| 51 | transform .2s cubic-bezier(.16, |
| 52 | 1, |
| 53 | .3, |
| 54 | 1); |
| 55 | z-index:10 |
| 56 | } |
| 57 | .motion-tip:hover .motion-box, |
| 58 | .motion-tip:focus-within .motion-box { |
| 59 | opacity:1; |
| 60 | transform:translateX(-50%) translateY(0) scale(1) |
| 61 | } |
| 62 | .motion-arrow { |
| 63 | position:absolute; |
| 64 | top:100%; |
| 65 | left:50%; |
| 66 | transform:translate(-50%, |
| 67 | -50%) rotate(45deg); |
| 68 | width:8px; |
| 69 | height:8px; |
| 70 | background:#151515; |
| 71 | border-right:1px solid #333; |
| 72 | border-bottom:1px solid #333 |
| 73 | } |
| 74 | @media (prefers-reduced-motion:reduce) { |
| 75 | .motion-box { |
| 76 | transition:none; |
| 77 | transform:translateX(-50%) |
| 78 | } |
| 79 | } |
untitled.html
HTML
| 1 | <div class="flex gap-4 items-center justify-center p-12 bg-[#0A0A0A]"> |
| 2 | <div class="group relative inline-flex"> |
| 3 | <button aria-label="Copy" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all focus:outline-none focus:border-[#00FF41]"> |
| 4 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 5 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 6 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 7 | </svg> |
| 8 | </button> |
| 9 | <span class="absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1.5 opacity-0 scale-95 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] pointer-events-none z-10 transition-all duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-focus-within:scale-100 motion-reduce:transition-none motion-reduce:translate-y-0"> |
| 10 | Copy |
| 11 | <span class="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-[#151515] border-r border-b border-[#333] rotate-45"> |
| 12 | </span> |
| 13 | </span> |
| 14 | </div> |
| 15 | <div class="group relative inline-flex"> |
| 16 | <button aria-label="Save" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all focus:outline-none focus:border-[#00FF41]"> |
| 17 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 18 | <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/> |
| 19 | <polyline points="17 21 17 13 7 13 7 21"/> |
| 20 | <polyline points="7 3 7 8 15 8"/> |
| 21 | </svg> |
| 22 | </button> |
| 23 | <span class="absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1.5 opacity-0 scale-95 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] pointer-events-none z-10 transition-all duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-focus-within:scale-100 motion-reduce:transition-none motion-reduce:translate-y-0"> |
| 24 | Save |
| 25 | <span class="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-[#151515] border-r border-b border-[#333] rotate-45"> |
| 26 | </span> |
| 27 | </span> |
| 28 | </div> |
| 29 | <div class="group relative inline-flex"> |
| 30 | <button aria-label="Delete" class="w-10 h-10 inline-flex items-center justify-center rounded-lg border border-[#333] bg-[#1A1A1A] text-[#A0A0A0] hover:bg-[#222] hover:border-[#00FF41] hover:text-[#00FF41] transition-all focus:outline-none focus:border-[#00FF41]"> |
| 31 | <svg class="w-[18px] h-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 32 | <polyline points="3 6 5 6 21 6"/> |
| 33 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 34 | </svg> |
| 35 | </button> |
| 36 | <span class="absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1.5 opacity-0 scale-95 px-3 py-1.5 rounded-md text-[11px] whitespace-nowrap bg-[#151515] text-[#E0E0E0] border border-[#333] pointer-events-none z-10 transition-all duration-200 ease-out group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-100 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-focus-within:scale-100 motion-reduce:transition-none motion-reduce:translate-y-0"> |
| 37 | Delete |
| 38 | <span class="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-[#151515] border-r border-b border-[#333] rotate-45"> |
| 39 | </span> |
| 40 | </span> |
| 41 | </div> |
| 42 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | :root{--bs-tooltip-bg:#151515;--bs-tooltip-color:#E0E0E0}.tooltip-motion{transition:opacity .2s ease,transform .2s ease !important;transform:translateY(6px) !important}.tooltip-motion.show{transform:translateY(0) !important}.tooltip-motion .tooltip-arrow::before{border-top-color:#333 !important} |
| 3 | </style> |
| 4 | <div class="d-flex gap-3 align-items-center justify-content-center p-5"> |
| 5 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-motion" data-bs-placement="top" title="Copy" aria-label="Copy"> |
| 6 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 7 | <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/> |
| 8 | <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/> |
| 9 | </svg> |
| 10 | </button> |
| 11 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-motion" data-bs-placement="top" title="Save" aria-label="Save"> |
| 12 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 13 | <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/> |
| 14 | <polyline points="17 21 17 13 7 13 7 21"/> |
| 15 | <polyline points="7 3 7 8 15 8"/> |
| 16 | </svg> |
| 17 | </button> |
| 18 | <button class="btn btn-dark border-secondary d-inline-flex align-items-center justify-content-center" style="width:40px;height:40px" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-motion" data-bs-placement="top" title="Delete" aria-label="Delete"> |
| 19 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 20 | <polyline points="3 6 5 6 21 6"/> |
| 21 | <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> |
| 22 | </svg> |
| 23 | </button> |
| 24 | </div> |
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.