Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jul 10, 2017
Embed
What would you like to do?
Pure CSS Tooltips
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="content">
<h1>Pure CSS Tooltips</h1>
<h2>Tooltips on Divs</h2>
<div class="row">
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-top t-sm bordered" data-tooltip="Top Tooltip">Div</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-right t-sm bordered" data-tooltip="Right Tooltip">Div</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-bottom t-sm bordered" data-tooltip="Bottom Tooltip">Div</div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-left t-sm bordered" data-tooltip="Left Tooltip">Div</div>
</div>
</div>
<h2>Tooltips on Buttons</h2>
<div class="row">
<div class="col-sm-3 col-xs-6 text-center">
<button class="t-top t-sm btn btn-block btn-success" data-tooltip="Top Tooltip">Button</button>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<button class="t-right t-sm btn btn-block btn-primary" data-tooltip="Right Tooltip">Button</button>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<button class="t-bottom t-sm btn btn-block btn-danger" data-tooltip="Bottom Tooltip">Button</button>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<button class="t-left t-sm btn btn-block btn-warning" data-tooltip="Left Tooltip">Button</button>
</div>
</div>
<h2>Tooltips on Inputs</h2>
<div class="row">
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-top t-sm full-width" data-tooltip="Top Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-right t-sm full-width" data-tooltip="Right Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-bottom t-sm full-width" data-tooltip="Bottom Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<div class="t-left t-sm full-width" data-tooltip="Left Tooltip"><input class="form-control text-center" placeholder="Input" /></div>
</div>
</div>
<h2>Tooltips on Links</h2>
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra augue quis consequat viverra. Sed pulvinar lacus urna. Nullam sed nisl semper, elementum nisl eu, semper ex. Vestibulum bibendum at neque id dictum. <a href="#" class="t-bottom t-sm"
data-tooltip="Bottom Tooltip">Maecenas</a> at magna semper, malesuada libero faucibus, eleifend mauris. Nullam dignissim blandit justo, nec dictum risus dapibus at. In hac habitasse platea dictumst. Praesent nec nulla ullamcorper, commodo
tellus id, consectetur metus. In euismod augue lectus, vitae pretium tortor auctor suscipit.</p>
<p>Sed vulputate luctus metus sed varius. Aliquam auctor lobortis ante, nec dignissim sem sodales at. Sed sed dolor ex. Curabitur pharetra, nibh ut aliquam varius, nisl mi vulputate diam, eget scelerisque odio felis sed justo. Suspendisse odio
ligula, semper ac dui vitae, hendrerit hendrerit felis. Ut vel rutrum nunc, sit amet euismod turpis. Suspendisse quis nisl consectetur, ullamcorper lacus non, euismod mi. Proin nec justo vel libero semper malesuada pellentesque eget sem.
<a href="#" class="t-top t-sm" data-tooltip="Top Tooltip">Quisque</a> et lacus a dolor fermentum vestibulum ut non neque. Vivamus iaculis sodales interdum. Aliquam pretium tempor erat vel posuere. Nam tellus diam, ultricies at sollicitudin
ut, hendrerit id quam. In viverra elementum ex nec congue.</p>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
body {
background-color: #e0e0e0;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 21px;
padding: 30px 0;
}
.content {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075), 0 2px 4px rgba(0, 0, 0, 0.0375);
padding: 30px 30px 0;
}
h1 {
color: #333;
font-family: 'Pacifico', cursive;
font-size: 28px;
line-height: 42px;
margin: 0 0 15px;
text-align: center;
}
h2 {
border-bottom: 1px solid #ddd;
color: #aaa;
font-size: 12px;
line-height: 24px;
margin: 0 0 15px;
padding: 0;
position: relative;
text-align: center;
}
a {
color: red !important;
font-weight: bold;
}
div[class^="col"] {
margin-bottom: 25px;
}
.bordered {
background: #e2e2e2;
border: 1px solid #ccc;
padding: 5px 10px;
}
.full-width {
width: 100%;
}
[data-tooltip] {
position: relative;
cursor: pointer;
&:before, &:after {
position: absolute;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all .15s cubic-bezier(.5, 1, .25, 1);
z-index: 1;
}
&:before {
padding: 5px;
width: 110px;
border-radius: 3px;
background: #000;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
font-weight: normal;
line-height: 1.2;
}
&:after {
border: 8px solid transparent;
width: 0;
content: "";
font-size: 0;
line-height: 0;
}
&:hover:before, &:hover:after {
visibility: visible;
opacity: 1;
}
/********** Tooltip Sizes **********/
&.t-xl:before {
width: 200px;
}
&.t-lg:before {
width: 170px;
}
&.t-md:before {
width: 140px;
}
&.t-sm:before {
width: 110px;
}
&.t-xs:before {
width: 80px;
}
/********** Top Tooltip **********/
&.t-top {
&:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
transform: translateX(-50%);
}
&:after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-top: 8px solid #000;
border-bottom: none;
}
&:hover:before, &:hover:after {
transform: translateX(-50%) translateY(-5px);
}
}
/********** Right Tooltip **********/
&.t-right {
&:before {
top: 50%;
left: 100%;
margin-left: 5px;
transform: translateY(-50%);
}
&:after {
top: 50%;
left: 100%;
transform: translateY(-50%);
border-right: 8px solid #000;
border-left: none;
}
&:hover:before, &:hover:after {
transform: translateX(5px) translateY(-50%);
}
}
/********** Bottom Tooltip **********/
&.t-bottom {
&:before {
top: 100%;
left: 50%;
margin-top: 5px;
transform: translateX(-50%);
}
&:after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-bottom: 8px solid #000;
border-top: none;
}
&:hover:before, &:hover:after {
transform: translateX(-50%) translateY(5px);
}
}
/********** Left Tooltip **********/
&.t-left {
&:before {
top: 50%;
right: 100%;
margin-right: 5px;
transform: translateY(-50%);
}
&:after {
top: 50%;
right: 100%;
transform: translateY(-50%);
border-left: 8px solid #000;
border-right: none;
}
&:hover:before, &:hover:after {
transform: translateX(-5px) translateY(-50%);
}
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment