Created
December 14, 2017 04:39
-
-
Save tobynet/e327577477a84994a67b63b32dee98a6 to your computer and use it in GitHub Desktop.
CSS Simple Tooltip
This file contains 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
| <h1>CSS Simple Tooltip</h1> | |
| <div class="demo"> | |
| <p> | |
| <a href="#" data-tooltip="あいうえお">A link with a tooltip</a> | |
| | |
| <a href="#" data-tooltip="always-on" data-tooltip-alwayson>Always-on</a> | |
| | |
| <a href="#" data-tooltip="あいうえお" data-tooltip-pos="bottom" data-tooltip-alwayson>Under tooltip</a> | |
| </p> | |
| <p> | |
| <button data-tooltip="Long long tooplip. 長い長いツールチップ"> | |
| button with a tooltip</button> | |
| <button data-tooltip="Long long tooplip. 長い長いツールチップ" | |
| data-tooltip-alwayson | |
| style=""> | |
| Always on</button> | |
| <button data-tooltip="bottom tooltip. " | |
| data-tooltip-pos="bottom" | |
| data-tooltip-alwayson | |
| > | |
| Under</button> | |
| </p> | |
| </div> | |
| <hr> | |
| <a href="https://codepen.io/cbracco/pen/qzukg">Original code by @cbracco</a> |
This file contains 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
| /** | |
| * Demo styles | |
| * Not needed for tooltips to work | |
| */ | |
| /* `border-box`... ALL THE THINGS! */ | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| margin: 64px auto; | |
| text-align: center; | |
| font-size: 100%; | |
| max-width: 640px; | |
| width: 94%; | |
| } | |
| header, .demo, .demo p { | |
| margin: 3em 0 6em 0; | |
| text-align: center; | |
| } | |
| /** | |
| * Tooltip Styles | |
| */ | |
| /* Add this attribute to the element that needs a tooltip */ | |
| [data-tooltip] { | |
| position: relative; | |
| z-index: 2; | |
| cursor: pointer; | |
| } | |
| /* Hide the tooltip content by default | |
| * Show the tooltip, if always-on by data attributes | |
| */ | |
| [data-tooltip]:not([data-tooltip-alwayson]):before, | |
| [data-tooltip]:not([data-tooltip-alwayson]):after { | |
| visibility: hidden; | |
| opacity: 0.0; | |
| } | |
| /* Prevent click events */ | |
| [data-tooltip]:before, | |
| [data-tooltip]:after { | |
| pointer-events: none; | |
| } | |
| /* Show tooltip content on hover */ | |
| [data-tooltip]:hover:before, | |
| [data-tooltip]:hover:after { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* Position tooltip above the element */ | |
| [data-tooltip]:before { | |
| position: absolute; | |
| transform: translateX(-50%); | |
| padding: 7px; | |
| border-radius: 3px; | |
| background-color: hsla(0, 0%, 20%, 1.0); | |
| color: #fff; | |
| content: attr(data-tooltip); | |
| text-align: center; | |
| font-size: 14px; | |
| line-height: 1.2; | |
| left: 50%; | |
| margin-bottom: 5px; | |
| word-break: keep-all; | |
| min-width: 100px; | |
| bottom: 110%; | |
| } | |
| /* Triangle hack to make tooltip look like a speech bubble */ | |
| [data-tooltip]:after { | |
| position: absolute; | |
| content: " "; | |
| font-size: 0; | |
| line-height: 0; | |
| left: 50%; | |
| margin-left: -5px; | |
| width: 0; | |
| bottom: 110%; | |
| border-top: 5px solid hsla(0, 0%, 20%, 1.0); | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| } | |
| /* Position tooltip below the element */ | |
| [data-tooltip-pos="bottom"]:before { | |
| bottom: initial; | |
| top: 120%; | |
| top: attr(data-tooltip-pos-val); | |
| } | |
| [data-tooltip-pos="bottom"]:after { | |
| bottom: initial; | |
| top: 120%; | |
| margin-top: -5px; | |
| border-top: none; | |
| border-bottom: 5px solid hsla(0, 0%, 20%, 1.0); | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment