Skip to content

Instantly share code, notes, and snippets.

@ryanpcmcquen ryanpcmcquen/tooltip.css
Last active Aug 7, 2018

Embed
What would you like to do?
The coolest CSS tooltips you have ever seen. Just add your text to a `data-tooltip` attribute and PROFIT.
/*
Styles for elements having a data-tooltip attribute - using the star
selector sucks so you may wish to change this to predefined list of HTML
tags instead.
*/
*[data-tooltip] {
/*
position:relative the tooltip launcher to enable us to position:absolute
the generated content.
*/
position: relative;
/*
Change cursor - you may want to remove this if you don't like the
effect.
*/
/*cursor:help;*/
/*
Without this setting, the box will not wrap the text in certain views.
*/
white-space: normal;
}
/* Default ::before & ::after values. */
*[data-tooltip]::before, *[data-tooltip]::after {
pointer-events: none;
outline: none;
display: block;
z-index: 999;
position: absolute;
/*bottom: 100%;*/
top: 125%;
left: 50%;
margin: 0;
padding: 0;
/* Set-up the animation. */
opacity: 0;
transition: all 0.3s ease-out 1s;
transform: translate(-50%, -1rem);
}
/* Tooltip arrow. */
*[data-tooltip]::after {
content: "";
/* Borders are used to create the arrow so no height or width required. */
width: 0;
height: 0;
line-height: 0;
/* This sets the tooptip arrow color. */
/*border-top:5px solid #000;*/
border-bottom: 5px solid #3198dd;
/*border-top-color:#3198dd;*/
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: transparent;
overflow: hidden;
}
/* Tooltip bubble. */
*[data-tooltip]::before {
/* Use the data-tooltip attribute to set the content. */
content: attr(data-tooltip);
/* Set a default width. */
width: 148px;
/*
Use a margin to create the space required for displaying the tooltip
arrow.
*/
margin-top: 5px;
/* Defensive font reset as we inherit. */
letter-spacing: normal;
text-align: center;
/* (Older) Moz doesn't seem to recognise the following. */
text-decoration: none;
word-spacing: normal;
word-wrap: normal;
word-break: normal;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
/*font-weight:normal;*/
font-weight: bold;
font-family: "Open Sans", "Segoe", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Verdana, sans-serif;
/*
Webkit has problems using rem units on generated content so I'm falling
back to old school pixels.
*/
font-size: 13px;
padding: 6px;
min-height: 18px;
/*color:#fcfcfc;*/
color: #ffffff;
/* Default 'dark' theme. */
/*
background-color:#222;
background-image:linear-gradient(top,#222,#000);
*/
/* Make the 'blue' theme our default. */
background-color: #3498db;
background-image: linear-gradient(top, #3498db, #3198dd);
border-radius: 0.2em;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0px;
}
*[data-tooltip]:hover::before, *[data-tooltip]:hover::after {
/* http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/ */
transform: perspective(1px) translate(-50%, 0);
/* Reset pointer events or things go all strange ... */
pointer-events: auto;
/* Set the final opacity. */
opacity: 0.96;
}
/* Monospace font. */
*[data-tooltip][data-tooltip-theme~="mono"]::after, [data-tooltip-theme~="mono"] *[data-tooltip]::after {
font-family: monospace;
}
/* Left align text. */
*[data-tooltip][data-tooltip-theme~="lft"]::after, [data-tooltip-theme~="lft"] *[data-tooltip]::after {
text-align: left;
}
/* Right align text. */
*[data-tooltip][data-tooltip-theme~="rht"]::after, [data-tooltip-theme~="rht"] *[data-tooltip]::after {
text-align: right;
}
/* Right to left writing direction. */
*[data-tooltip][data-tooltip-theme~="rtl"]::after, [data-tooltip-theme~="rtl"] *[data-tooltip]::after {
direction: rtl;
}
/* Blue theme. */
*[data-tooltip][data-tooltip-theme~="blue"]::after, [data-tooltip-theme~="blue"] *[data-tooltip]::after {
background-color: #3498db;
background-image: linear-gradient(top, #3498db, #3198dd);
}
*[data-tooltip][data-tooltip-theme~="blue"]::before, [data-tooltip-theme~="blue"] *[data-tooltip]::before {
border-top-color: #3198dd;
}
/* Red theme. */
*[data-tooltip][data-tooltip-theme~="red"]::after, [data-tooltip-theme~="red"] *[data-tooltip]::after {
background-color: #c0392b;
background-image: linear-gradient(top, #c0392b, #e74c3c);
}
*[data-tooltip][data-tooltip-theme~="red"]::before, [data-tooltip-theme~="red"] *[data-tooltip]::before {
border-top-color: #e74c3c;
}
/* Green theme. */
*[data-tooltip][data-tooltip-theme~="green"]::after, [data-tooltip-theme~="green"] *[data-tooltip]::after {
background-color: #3FC380;
background-image: linear-gradient(top, #3FC380, #2ECC71);
}
*[data-tooltip][data-tooltip-theme~="green"]::before, [data-tooltip-theme~="green"] *[data-tooltip]::before {
border-top-color: #2ECC71;
}
/* Orange theme. */
*[data-tooltip][data-tooltip-theme~="orange"]::after, [data-tooltip-theme~="orange"] *[data-tooltip]::after {
background-color: #F9690E;
background-image: linear-gradient(top, #F9690E, #D35400);
}
*[data-tooltip][data-tooltip-theme~="orange"]::before, [data-tooltip-theme~="orange"] *[data-tooltip]::before {
border-top-color: #D35400;
}
/*
Make tooltip "links" have a different pointer (as the tooltip uses the
"help" cursor).
*/
a[data-tooltip] {
cursor: pointer;
}
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.