<div class="container">
<div class="pytesNET">
<a href="https://www.pytes.net" target="_blank">
<svg width="100%" height="100%" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:3;"><g id="Version-1---2" serif:id="Version 1 / 2"><path d="M77.949,34.252c6.613,4.331 11.637,1.186 13.316,0.766l-3.328,11.558c13.24,-2.883 20.338,12.302 20.338,12.302c-3.754,-0.797 -8.317,-0.968 -10.953,1.478c4.369,3.227 6.514,6.993 5.977,11.407c-4.122,-1.817 -11.229,-1.918 -11.229,-1.918c7.054,14.904 -0.158,21.683 -0.158,21.683c-0.11,-3.965 -1.66,-6.604 -4.847,-7.735c0,0 4.067,17.418 -16.047,25.498c7.695,-14.915 1.318,-24.871 1.318,-24.871c0,0 -0.816,7.14 -9.368,8.247c0,0 7.134,-10.226 -0.396,-17.407c-1.695,0.441 -7.939,-0.059 -10.051,7.123c-3.095,-3.046 -6.459,-1.777 -6.459,-1.777c0,0 0.49,4.876 -3.302,9.079c-2.539,-4.428 -7.53,-8.331 -12.662,-7.369l2.018,-4.593l-1.217,-2.45l3.171,0.489l20.059,-8.095l-7.659,-3.298l-19.954,3.059l0.579,3.724l-5.144,-3.464l-3.661,0.053l-6.565,-7.535l28.221,-13.526l3.142,-7.452l11.308,-5.882l12.781,-4.349l22.414,-15.362c1.564,8.306 -7.053,19.193 -11.642,20.617Zm-31.645,11.483l9.952,-7.663l-0.38,5.489l-9.572,2.174Zm13.696,-14.863c3.297,-13.085 16.029,-12.874 22.935,-20.062c1.532,3.698 -0.277,6.487 -2.103,7.874l-13.979,9.848l-6.853,2.34Z"></path></g></svg>
<div class="text">
<span class="title">pytes<b>NET</b></span>
<span class="subtitle">Tooltip Paradise</span>
</div>
</a>
</div>
<div class="alert">
<a href="https://codepen.io/sambrishes/pen/vYyEpmp" target="_blank"><b>DEPRECATED!</b> Visit MARK II of our Tooltip Paradise Script here!</a>
</div>
<h1>Tooltip Positions</h1>
<div class="example">
<div class="example-button" data-tooltip="This Tooltip is on the Left" data-tooltip-config="left">
Left Tooltip
</div>
<div class="example-button" data-tooltip="This Tooltip is on the Top" data-tooltip-config="top">
Top Tooltip
</div>
<div class="example-button" data-tooltip="This Tooltip is on the Bottom" data-tooltip-config="bottom">
Bottom Tooltip
</div>
<div class="example-button" data-tooltip="This Tooltip is on the Right" data-tooltip-config="right">
Right Tooltip
</div>
</div>
<h1>Tooltip Animations</h1>
<div class="example">
<div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,left">
Fade Left
</div>
<div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade">
Fade Top
</div>
<div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,bottom">
Fade Bottom
</div>
<div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,right">
Fade Right
</div>
</div>
<div class="example">
<div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,left">
Ease In, Left
</div>
<div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in">
Ease In, Top
</div>
<div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,bottom">
Ease In, Bottom
</div>
<div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,right">
Ease In, Right
</div>
</div>
<div class="example">
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,left">
Ease Out, Left
</div>
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out">
Ease Out, Top
</div>
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,bottom">
Ease Out, Bottom
</div>
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,right">
Ease Out, Right
</div>
</div>
<h1>Tooltip Colours</h1>
<div class="example">
<div class="example-button white" data-tooltip="This Tooltip is White" data-tooltip-config="fade,white">
White
</div>
<div class="example-button black" data-tooltip="This Tooltip is Black" data-tooltip-config="fade,black">
Black
</div>
<div class="example-button red" data-tooltip="This Tooltip is Red" data-tooltip-config="fade,red">
Red
</div>
<div class="example-button orange" data-tooltip="This Tooltip is Orange" data-tooltip-config="fade,orange">
Orange
</div>
<div class="example-button green" data-tooltip="This Tooltip is Green" data-tooltip-config="fade,green">
Green
</div>
<div class="example-button blue" data-tooltip="This Tooltip is Blue" data-tooltip-config="fade,blue">
Blue
</div>
<div class="example-button violet" data-tooltip="This Tooltip is Violet" data-tooltip-config="fade,violet">
Violet
</div>
</div>
<h1>Tooltip on Different Events</h1>
<div class="example">
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out"
data-event-in="click" data-event-out="click">
Tooltip on Click
</div>
<div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out"
data-event-in="dblclick" data-event-out="click">
Tooltip on Double Click
</div>
</div>
</div>// Color Variables
@white: #FFFFFF;
@black: #202428;
@red: #DC4B46;
@orange: #DC9650;
@green: #19C878;
@blue: #4B64C8;
@violet: #A53278;
// Core Design
*, *:before, *:after{
box-sizing: inherit;
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
}
html, body{
color: @white;
margin: 0;
padding: 0;
display: block;
font-size: 14px;
line-height: 1.5;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: @black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
h1{
color: @white;
margin: 15px 0 30px 0;
padding: 10px 15px;
font-size: 32px;
line-height: 42px;
font-weight: 400;
font-weight: 300;
border-bottom: 1px solid fadeout(@white, 75%);
}
.container{
width: 650px;
margin: 50px auto;
padding: 0;
display: block;
text-align: center;
}
.pytesNET{
width: auto;
margin: 0 0 15px 0;
padding: 0;
display: inline-block;
text-align: left;
background-color: #101418;
border: 1px solid #101418;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
transition: border 142ms linear, background 142ms linear;
-moz-transition: border 142ms linear, background 142ms linear;
-webkit-transition: border 142ms linear, background 142ms linear;
&:hover{
background-color: #468296;
text-shadow: -1px -1px 0 darken(#468296, 15%);
border-color: lighten(#468296, 15%);
}
a{
width: auto;
margin: 0;
padding: 10px 15px;
display: block;
vertical-align: top;
text-decoration: none;
svg{
fill: white;
width: 60px;
height: auto;
display: inline-block;
vertical-align: top;
}
div{
width: auto;
margin: 0 0 0 15px;
padding: 0;
display: inline-block;
vertical-align: top;
span{
font-weight: 300;
display: block;
vertical-align: top;
&.title{
color: fadeout(@white, 15%);
font-size: 22px;
}
&.subtitle{
color: fadeout(@white, 35%);
font-size: 16px;
}
}
}
}
}
.alert {
margin: 30px 0;
a {
color: black;
padding: 7px 18px;
display: inline-block;
background-color: #FBF60A;
text-decoration: none;
border-radius: 3px;
font-weight: 400;
font-size: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, .15);
transition: background-color 142ms linear;
b {
font-weight: 600;
}
&:hover {
background-color: darken(#FBF60A, 20%);
}
}
}
.example{
width: 100%;
margin: 0;
padding: 30px 0;
display: block;
.example-button{
cursor: pointer;
color: fadeout(@white, 15%);
margin: 10px;
padding: 10px 15px;
display: inline-block;
background-color: darken(@black, 7%);
border: 1px solid fadeout(@white, 75%);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 1px 1px 0 darken(@black, 7%);
-moz-box-shadow: 0 1px 1px 0 darken(@black, 7%);
-webkit-box-shadow: 0 1px 1px 0 darken(@black, 7%);
&.white{
color: @black;
background-color: @white;
border-color: @white;
}
&.black{
color: @white;
background-color: lighten(@black, 5%);
border-color: lighten(@black, 12%);
}
&.red{
color: @white;
background-color: @red;
border-color: lighten(@red, 15%);
}
&.orange{
color: @white;
background-color: @orange;
border-color: lighten(@orange, 15%);
}
&.green{
color: @white;
background-color: @green;
border-color: lighten(@green, 15%);
}
&.blue{
color: @white;
background-color: @blue;
border-color: lighten(@blue, 15%);
}
&.violet{
color: @white;
background-color: @violet;
border-color: lighten(@violet, 15%);
}
}
}
// Tooltip Design
*[data-tooltip]{
cursor: pointer;
}
.tooltip{
width: auto;
margin: 0;
padding: 10px 15px;
opacity: 1.0;
z-index: 999;
display: inline-block;
opacity: 0;
position: absolute;
font-size: 12px;
line-height: 1.25;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
&.show{
opacity: 1.0;
}
&:after{
width: 0;
height: 0;
content: "";
display: block;
position: absolute;
}
// Tooltip Positions
&.tooltip-top{
&:after{
top: 100%;
left: 50%;
margin: 0 0 0 -10px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: @white transparent transparent transparent;
}
}
&.tooltip-left{
&:after{
top: 50%;
left: 100%;
margin: -10px 0 0 0;
border-width: 10px 0 10px 10px;
border-style: solid;
border-color: transparent transparent transparent @white;
}
}
&.tooltip-right{
&:after{
top: 50%;
left: -10px;
margin: -10px 0 0 0;
border-width: 10px 10px 10px 0;
border-style: solid;
border-color: transparent @white transparent transparent;
}
}
&.tooltip-bottom{
&:after{
top: -10px;
left: 50%;
margin: 0 0 0 -10px;
border-width: 0 10px 10px 10px;
border-style: solid;
border-color: transparent transparent @white transparent;
}
}
// Tooltip Colors
&.tooltip-red{
color: @white;
background-color: @red;
&.tooltip-top:after{
border-top-color: @red;
}
&.tooltip-left:after{
border-left-color: @red;
}
&.tooltip-right:after{
border-right-color: @red;
}
&.tooltip-bottom:after{
border-bottom-color: @red;
}
}
&.tooltip-orange{
color: @white;
background-color: @orange;
&.tooltip-top:after{
border-top-color: @orange;
}
&.tooltip-left:after{
border-left-color: @orange;
}
&.tooltip-right:after{
border-right-color: @orange;
}
&.tooltip-bottom:after{
border-bottom-color: @orange;
}
}
&.tooltip-green{
color: @white;
background-color: @green;
&.tooltip-top:after{
border-top-color: @green;
}
&.tooltip-left:after{
border-left-color: @green;
}
&.tooltip-right:after{
border-right-color: @green;
}
&.tooltip-bottom:after{
border-bottom-color: @green;
}
}
&.tooltip-blue{
color: @white;
background-color: @blue;
&.tooltip-top:after{
border-top-color: @blue;
}
&.tooltip-left:after{
border-left-color: @blue;
}
&.tooltip-right:after{
border-right-color: @blue;
}
&.tooltip-bottom:after{
border-bottom-color: @blue;
}
}
&.tooltip-violet{
color: @white;
background-color: @violet;
&.tooltip-top:after{
border-top-color: @violet;
}
&.tooltip-left:after{
border-left-color: @violet;
}
&.tooltip-right:after{
border-right-color: @violet;
}
&.tooltip-bottom:after{
border-bottom-color: @violet;
}
}
&.tooltip-black{
color: @white;
background-color: darken(@black, 7%);
&.tooltip-top:after{
border-top-color: darken(@black, 7%);
}
&.tooltip-left:after{
border-left-color: darken(@black, 7%);
}
&.tooltip-right:after{
border-right-color: darken(@black, 7%);
}
&.tooltip-bottom:after{
border-bottom-color: darken(@black, 7%);
}
}
&.tooltip-white{
color: @black;
background-color: darken(@white, 3%);
&.tooltip-top:after{
border-top-color: darken(@white, 3%);
}
&.tooltip-left:after{
border-left-color: darken(@white, 3%);
}
&.tooltip-right:after{
border-right-color: darken(@white, 3%);
}
&.tooltip-bottom:after{
border-bottom-color: darken(@white, 3%);
}
}
// Animation :: Blank
&.tooltip-blank{
opacity: 0;
&.show{
opacity: 1.0;
}
}
// Animation :: Fade
&.tooltip-fade{
opacity: 0;
transition: opacity 142ms linear;
-moz-transition: opacity 142ms linear;
-webkit-transition: opacity 142ms linear;
&.show{
opacity: 1.0;
}
}
// Animation :: Ease-In
&.tooltip-ease-in{
transition: margin 142ms linear, opacity 142ms linear;
-moz-transition: margin 142ms linear, opacity 142ms linear;
-webkit-transition: margin 142ms linear, opacity 142ms linear;
&.tooltip-top{
margin: -25px 0 0 0;
}
&.tooltip-left{
margin: 0 0 0 -25px;
}
&.tooltip-right{
margin: 0 0 0 25px;
}
&.tooltip-bottom{
margin: 25px 0 0 0;
}
&.tooltip-top.show,
&.tooltip-left.show,
&.tooltip-right.show,
&.tooltip-bottom.show{
margin: 0;
}
}
// Animation :: Ease-Out
&.tooltip-ease-out{
opacity: 0;
transition: margin 142ms linear, opacity 142ms linear;
-moz-transition: margin 142ms linear, opacity 142ms linear;
-webkit-transition: margin 142ms linear, opacity 142ms linear;
&.show{
margin: 0;
opacity: 1.0;
}
&.tooltip-top{
margin: 15px 0 0 0;
}
&.tooltip-left{
margin: 0 0 0 15px;
}
&.tooltip-right{
margin: 0 0 0 -15px;
}
&.tooltip-bottom{
margin: -15px 0 0 0;
}
&.tooltip-top.show,
&.tooltip-left.show,
&.tooltip-right.show,
&.tooltip-bottom.show{
margin: 0;
}
}
}var toolID = 0, tooltip = function(ev){
var _in = this.getAttribute("data-event-in") || "mouseenter";
var _out = this.getAttribute("data-event-out") || "mouseleave";
var action = (_in == _out)? !this.hasAttribute("data-tooltip-id"): (ev.type == _in);
// Show Tooltip
if(action){
var config = {
color: "white",
position: "top",
animation: "blank",
classNames: ""
}, tip, pos;
if(!this.hasAttribute("data-tooltip-id")){
if(this.hasAttribute("data-tooltip-config")){
this.getAttribute("data-tooltip-config").split(",").forEach(function(item){
if(["white", "black", "red", "orange", "green", "blue", "violet"].indexOf(item) >= 0){
config.color = item;
} else if(["top", "left", "right", "bottom"].indexOf(item) >= 0){
config.position = item;
} else if(["blank", "fade", "ease-in", "ease-out"].indexOf(item) >= 0){
config.animation = item;
} else {
config.classNames += " " + item;
}
});
}
tip = document.createElement("DIV");
tip.id = "tooltip-" + ++toolID;
tip.innerHTML = this.getAttribute("data-tooltip");
tip.className = "tooltip tooltip-" + config.color + " tooltip-" + config.position + " "
+ "tooltip-" + config.animation + config.classNames;
document.body.appendChild(tip);
pos = function(element){
var position = {
top: element.offsetTop || 0,
left: element.offsetLeft || 0,
width: element.offsetWidth || 0,
height: element.offsetHeight || 0
};
while(element = element.offsetParent){
position.top += element.offsetTop;
position.left += element.offsetLeft;
}
return position;
}(this);
switch(config.position){
case "left":
tip.style.top = (pos.top + (pos.height/2) - (tip.offsetHeight/2)) + "px";
tip.style.left = (pos.left - tip.offsetWidth - 10) + "px";
break;
case "right":
tip.style.top = (pos.top + (pos.height/2) - (tip.offsetHeight/2)) + "px";
tip.style.left = (pos.left + pos.width + 10) + "px";
break;
case "bottom":
tip.style.top = (pos.top + pos.height + 10) + "px";
tip.style.left = (pos.left + (pos.width / 2) - (tip.offsetWidth / 2)) + "px";
break;
default:
tip.style.top = (pos.top - tip.offsetHeight - 10) + "px";
tip.style.left = (pos.left + (pos.width / 2) - (tip.offsetWidth / 2)) + "px";
break;
}
this.setAttribute("data-tooltip-id", "tooltip-" + toolID);
}
(function(id){
setTimeout(function(){ document.querySelector("#" + id).className += " show" }, 25);
}(this.getAttribute("data-tooltip-id")));
return;
}
// Hide Tooltip
var tip = document.querySelector("#" + this.getAttribute("data-tooltip-id"));
tip.className = tip.className.replace(/(?:^|\s+)(show)(?:\s+|$)/, "");
this.removeAttribute("data-tooltip-id");
(function(e){
setTimeout(function(){ e.parentElement.removeChild(e); }, 200);
})(tip);
return;
};
// Init
document.addEventListener("DOMContentLoaded", function(){
[].forEach.call(document.querySelectorAll("[data-tooltip]"), function(item){
item.addEventListener(item.getAttribute("data-event-in") || "mouseenter", tooltip);
item.addEventListener(item.getAttribute("data-event-out") || "mouseleave", tooltip);
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.