Tooltip is used to describe information about anything which may on HTML pages. It is possible to create tooltip to show information about fields so that user will not be confused about what and how to enter correct data in fields.
Here is the general code to create tooltip design.
/* apply to elements, containing a data-title attribute */
[data-title] {
position: relative;
padding: 0;
}
[data-title]::before,
[data-title]::after {
position: absolute;
left: 50%;
z-index: 5;
opacity: 0;
visibility: hidden;
background: #000;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, .8);
-moz-transition: opacity 200ms 50ms linear;
-webkit-transition: opacity 200ms 50ms linear;
-ms-transition: opacity 200ms 50ms linear;
-o-transition: opacity 200ms 50ms linear;
transition: opacity 200ms 50ms linear;
}
[data-title]:hover::before,
[data-title]:hover::after {
opacity: 1;
visibility: visible;
}
/* the tooltip */
[data-title]::before {
content: attr(data-title);
width: 120px;
padding: 4px;
margin: 30px 0 0 -68px;
font: normal 11px/16px Arial, Sans-serif;
color: #fff;
cursor: default;
border-radius: 4px;
}
/* the pointer */
[data-title]::after {
content: "";
width: 8px;
height: 8px;
margin: 26px 0 0 -6px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
where, [data-title] may be any element / id / class etc on which on hover we have to show tooltip.
In css, you will also see content: attr(data-title); Here rather than using "data-title" you can use any attribute name, so that it will get value of that attribute and it will show on page as a tooltip.
Here is the example which shows how to use tooltip.
Conclusion :
I hope that this article would have helped you in Creating Best Tooltip Using HTML & CSS. Your feedback and constructive contributions are always welcome.
No comments:
Post a Comment