Tooltip is a comment that appears when hovering over an object such as text, images, links, and other interface elements. Content in the tooltip can be text, images or any other information. The purpose of the tooltip is to tell the user what the object is for or to display more information about the object being dragged. We can easily see this application on e-commerce sites. Tooltip often displays additional information about the image, specifications, price of the product you are viewing. The biggest advantage of the tooltip is that it not only displays more information about the object but also saves space on the interface. Let’s learn how to create a tooltip
Create tooltip with extremely simple bootstrap. You simply add the data-toggle = “tooltip” attribute to any element, using the title attribute to define the text that should display the tooltip. Besides, you can also use some other libraries. Today we will guide you to create tooltip without javascript or any library
HTML:
<div class=”container”>
<h1>CSS Directional c-tooltips</h1>
<div class=”demo”>
<p>Data attribute only<a href=”#” data-c-tooltip=”I’m the c-tooltip text”>c-tooltip</a></p>
<p><code>.c-tooltip</code> <a href=”#” class=”c-tooltip” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>
<p><code>.c-tooltip-top</code> <a href=”#” class=”c-tooltip-top” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>
<p><code>.c-tooltip-right</code> <a href=”#” class=”c-tooltip-right” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>
<p><code>.c-tooltip-bottom</code> <a href=”#” class=”c-tooltip-bottom” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a></p>
<p><a href=”#” class=”c-tooltip-left” data-c-tooltip=”I’m the c-tooltip text.”>c-tooltip</a> <code>.c-tooltip-left</code></p>
</div>
</div>
Css:
a:hover {
text-decoration: none;
}
header,
.demo,
.demo p {
margin: 4em 0;
text-align: center;
}
/* Base styles for the element that has a c-tooltip */
[data-c-tooltip],
.c-tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire c-tooltip */
[data-c-tooltip]:before,
[data-c-tooltip]:after,
.c-tooltip:before,
.c-tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire c-tooltip on hover and focus */
[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after,
.c-tooltip:hover:before,
.c-tooltip:hover:after,
.c-tooltip:focus:before,
.c-tooltip:focus:after {
visibility: visible;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Base styles for the c-tooltip’s arrow */
.c-tooltip:before,
[data-c-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: “”;
}
/* Base styles for the c-tooltip’s */
.c-tooltip:after,
[data-c-tooltip]:after {
z-index: 1000;
padding: 8px;
width: 160px;
background-color: #000;
background-color: rgba(51, 51, 51, 0.9);
color: #fff;
content: attr(data-c-tooltip);
font-size: 14px;
line-height: 1.2;
}
[data-c-tooltip]:before,
[data-c-tooltip]:after,
.c-tooltip:before,
.c-tooltip:after,
.c-tooltip-top:before,
.c-tooltip-top:after {
bottom: 100%;
left: 50%;
}
[data-c-tooltip]:before,
.c-tooltip:before,
.c-tooltip-top:before {
margin-left: -6px;
margin-bottom: -12px;
border-top-color: #000;
border-top-color: rgba(51, 51, 51, 0.9);
}
/* align top/bottom c-tooltips */
[data-c-tooltip]:after,
.c-tooltip:after,
.c-tooltip-top:after {
margin-left: -80px;
}
[data-c-tooltip]:hover:before,
[data-c-tooltip]:hover:after,
[data-c-tooltip]:focus:before,
[data-c-tooltip]:focus:after,
.c-tooltip:hover:before,
.c-tooltip:hover:after,
.c-tooltip:focus:before,
.c-tooltip:focus:after,
.c-tooltip-top:hover:before,
.c-tooltip-top:hover:after,
.c-tooltip-top:focus:before,
.c-tooltip-top:focus:after {
-webkit-transform: translateY(-12px);
-moz-transform: translateY(-12px);
transform: translateY(-12px);
}
/* Left */
.c-tooltip-left:before,
.c-tooltip-left:after {
right: 100%;
bottom: 50%;
left: auto;
}
.c-tooltip-left:before {
margin-left: 0;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-left-color: #000;
border-left-color: rgba(51, 51, 51, 0.9);
}
.c-tooltip-left:hover:before,
.c-tooltip-left:hover:after,
.c-tooltip-left:focus:before,
.c-tooltip-left:focus:after {
-webkit-transform: translateX(-12px);
-moz-transform: translateX(-12px);
transform: translateX(-12px);
}
/* Bottom */
.c-tooltip-bottom:before,
.c-tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.c-tooltip-bottom:before {
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-bottom-color: #000;
border-bottom-color: rgba(51, 51, 51, 0.9);
}
.c-tooltip-bottom:hover:before,
.c-tooltip-bottom:hover:after,
.c-tooltip-bottom:focus:before,
.c-tooltip-bottom:focus:after {
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
transform: translateY(12px);
}
/* Right */
.c-tooltip-right:before,
.c-tooltip-right:after {
bottom: 50%;
left: 100%;
}
.c-tooltip-right:before {
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: rgba(51, 51, 51, 0.9);
}
.c-tooltip-right:hover:before,
.c-tooltip-right:hover:after,
.c-tooltip-right:focus:before,
.c-tooltip-right:focus:after {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right c-tooltips */
.c-tooltip-left:before,
.c-tooltip-right:before {
top: 3px;
}
/* Vertically center c-tooltip content for left/right c-tooltips */
.c-tooltip-left:after,
.c-tooltip-right:after {
margin-left: 0;
margin-bottom: -16px;
}
Link demo:https://jsfiddle.net/TrinhThang/5p0f3r1n/1/
