Use CSS content attr to achieve mouse hover prompt (tooltip) effect

Why do we achieve this effect? ​​In fact, this effect is also derived from the title prompt, but because the original one is ugly, there are many derived plug-ins like this, such as jquery-ui's tooltip, Bootstrap's tooltips, etc. There are many plug-in libraries.

Sometimes we don’t need such a large plugin library. In fact, we only need to make some tooltips in one or two places, so we can use the CSS content property with the :before and :after pseudo-elements to insert generated content.

Check the effect as follows

The html code is as follows

<a class="dui-tips" data-tooltip="I am a 3cbest.com tips">w3cbest.com</a>

"data-" is a custom attribute, such as the custom prompt data-tooltip="I am a 3cbest.com prompt", and use the attr of content to call the custom prompt in conjunction with before and after, content: attr(data-tooltip);

content: attr is easy to understand. As long as you know jq's .attr(), you will know what it means. In this example, content: attr is used to get the value in data-tooltip.

CSS Code

.dui-tips {
position: relative;
display: inline-block;
cursor: pointer;
}
 
.dui-tips[data-tooltip]:after,
.dui-tips[data-tooltip]:before {
visibility: hidden;
position: absolute;
top: 50%;
left: 100%;
transition: all .3s;
}
 
.dui-tips[data-tooltip]:after {
 
content: attr(data-tooltip);
transform: translate(-5px, -50%);
white-space: pre;
padding: 5px 10px;
background-color: rgba(0, 0, 0, 0);
color: rgba(255, 255, 255, 0);
}
 
.dui-tips[data-tooltip]:before {
content: '';
height: 0;
width: 0;
transform: translate(-10px, -50%);
border-width: 5px 5px 5px 0;
border-style: solid;
border-color: transparent rgba(0, 0, 0, 0) transparent transparent;
}
.dui-tips:hover:after,.dui-tips:hover:before {
transition: all .3s;
visibility: visible;
 
}
.dui-tips:hover:after {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.8);
transform: translate(5px, -50%);
}
 
.dui-tips:hover:before {
border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
transform: translate(0px, -50%);
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.