FFILES.COM UPLOAD FAVORITES LOGIN REGISTER CONTACT

Pure CSS Tooltip by Chris Bracco

Pure CSS Tooltip by Chris Bracco file preview

Tooltip entirely CSS based, no scripts.
Move your mouse over the text/button to see a tooltip.
Created by Chris Bracco.

183 downloads, 4917 views

pure css tooltop tool-tip


Download (1.29 KB)

Comments

You need to login to post a comment.

user rngala
rngala 2 years ago

Great stuff with CSS.

user netgrafik
netgrafik 2 years ago

Thank's Chris. The code added fade effect.

user netgrafik
netgrafik 2 years ago

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Tooltip</title>
</head>
<body>
<style>
body{
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
}

/**
* 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%;
}

a:hover {
text-decoration: none;
}

header,
.demo,
.demo p {
margin: 4em 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 */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity =0);
opacity: 0;
pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha (Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity =100);
opacity: 1;
/* Fade effect */
transition: opacity .45s ease-in-out;
-moz-transition: opacity .45s ease-in-out;
-webkit-transition: opacity .45s ease-in-out;
/* Fade effect */
}

</style>

<h1>CSS Simple Tooltip</h1>

<div class="demo">
<p>Im a link with a tooltip.</p>
<p><button data-tooltip="Im the tooltip text." style="padding:0.5em;">Im a button with a tooltip</button></p>
</div>
</body>
</html>
<h1>CSS Simple Tooltip - Fade Effect</h1>
<div class="demo">
<p>Im a link with a tooltip.</p>
<p><button data-tooltip="Im the tooltip text." style="padding:0.5em;">Im a button with a tooltip</button></p>
</div>
</body>
</html>