Tooltip
CODE
×
HTML
<a class='tooltip-icon' href='#' data-bs-toggle='tooltip' data-bs-trigger='click' data-bs-title='Some tooltip text!'></a>
CSS
a.tooltip-icon { display:inline-block; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjYuMTcgNDY2LjE3Ij4NCiAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjMzLjA4IDBDMTA0LjM2IDAgMCAxMDQuMzYgMCAyMzMuMDhzMTA0LjM2IDIzMy4wOCAyMzMuMDggMjMzLjA4UzQ2Ni4xNiAzNjEuOCA0NjYuMTYgMjMzLjA4IDM2MS44MSAwIDIzMy4wOCAwWm0xNDIuMTkgMzc1LjI3Yy0zNy45OCAzNy45OC04OC40OCA1OC45LTE0Mi4xOSA1OC45cy0xMDQuMjEtMjAuOTItMTQyLjE5LTU4LjljLTM3Ljk4LTM3Ljk4LTU4LjktODguNDgtNTguOS0xNDIuMTlzMjAuOTItMTA0LjIxIDU4LjktMTQyLjE5YzM3Ljk4LTM3Ljk4IDg4LjQ4LTU4LjkgMTQyLjE5LTU4LjlzMTA0LjIxIDIwLjkyIDE0Mi4xOSA1OC45IDU4LjkgODguNDggNTguOSAxNDIuMTktMjAuOTIgMTA0LjIxLTU4LjkgMTQyLjE5WiIgLz4NCiAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjQ5Ljc5IDE4Mi40NmgtNTAuMTR2MjFoMTguMTR2MTE2LjIyaC0yMS45M3YyMWg3Ni40NXYtMjFoLTIyLjUyVjE4Mi40NnoiIC8+DQogIDxjaXJjbGUgZmlsbD0iY3VycmVudENvbG9yIiBjeD0iMjMzLjgiIGN5PSIxMzQuMTUiIHI9IjIzLjczIiAvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 18px; height: 18px; } a.tooltip-icon:hover, a.tooltip-icon:focus { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NjYuMTcgNDY2LjE3Ij4NCiAgPHBhdGggZmlsbD0idmFyKC0tZnNjMSkiIGQ9Ik0yMzMuMDggMEMxMDQuMzYgMCAwIDEwNC4zNiAwIDIzMy4wOHMxMDQuMzYgMjMzLjA4IDIzMy4wOCAyMzMuMDhTNDY2LjE2IDM2MS44IDQ2Ni4xNiAyMzMuMDggMzYxLjgxIDAgMjMzLjA4IDBabTE0Mi4xOSAzNzUuMjdjLTM3Ljk4IDM3Ljk4LTg4LjQ4IDU4LjktMTQyLjE5IDU4LjlzLTEwNC4yMS0yMC45Mi0xNDIuMTktNTguOWMtMzcuOTgtMzcuOTgtNTguOS04OC40OC01OC45LTE0Mi4xOXMyMC45Mi0xMDQuMjEgNTguOS0xNDIuMTljMzcuOTgtMzcuOTggODguNDgtNTguOSAxNDIuMTktNTguOXMxMDQuMjEgMjAuOTIgMTQyLjE5IDU4LjkgNTguOSA4OC40OCA1OC45IDE0Mi4xOS0yMC45MiAxMDQuMjEtNTguOSAxNDIuMTlaIiAvPg0KICA8cGF0aCBmaWxsPSJ2YXIoLS1mc2MxKSIgZD0iTTI0OS43OSAxODIuNDZoLTUwLjE0djIxaDE4LjE0djExNi4yMmgtMjEuOTN2MjFoNzYuNDV2LTIxaC0yMi41MlYxODIuNDZ6IiAvPg0KICA8Y2lyY2xlIGZpbGw9InZhcigtLWZzYzEpIiBjeD0iMjMzLjgiIGN5PSIxMzQuMTUiIHI9IjIzLjczIiAvPg0KPC9zdmc+'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } a { color: var(--fc4); } a:hover, a:focus { color: var(--fsc1); } a { text-decoration-color: var(--fsc1); } a:hover { text-decoration-color: var(--fsc1); }
JS
Tooltip
Last Edit: Sep 25, 2023, 5:58pm
×