Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Simple Tooltip
<h1>CSS Simple Tooltip</h1>
<div class="demo">
<p>
<a href="#" data-tooltip="あいうえお">A link with a tooltip</a>
&nbsp;
<a href="#" data-tooltip="always-on" data-tooltip-alwayson>Always-on</a>
&nbsp;
<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>
/**
* 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
You can’t perform that action at this time.