如何使用css伪元素创建自定义工具提示 [英] How can I create custom tooltips with css pseudoelements

问题描述

我正在阅读在这里。注意：原始内容为此处。

HTML

href =＃class =tooltiptitle =Sample tooltip> pellentesque< / a>< / p>

CSS

  .tooltip {
 display：inline; 
 position：relative; 
} 
 
 .tooltip：hover {
 color：＃c00; 
 text-decoration：none; 
} 
 
 .tooltip：hover：after {
 background：＃111; 
 background：rgba（0,0,0，.8）; 
 border-radius：.5em; 
 bottom：1.35em; 
 color：#fff; 
 content：attr（title）; 
 display：block; 
 left：1em; 
 padding：.3em 1em; 
 position：absolute; 
 text-shadow：0 1px 0＃000; 
 white-space：nowrap; 
 z-index：98; 
} 
 
 .tooltip：hover：before {
 border：solid; 
 border-color：＃111 transparent; 
 border-color：rgba（0,0,0，.8）transparent; 
 border-width：.4em .4em 0 .4em; 
 bottom：1em; 
 content：; 
 display：block; 
 left：2em; 
 position：absolute; 
 z-index：99; 
} 
  

I am reading css-tricks and in the end I can see the following.

Using an HTML5 data attribute, then pulling that attribute in and styling it as a pseudo element, we can create completely custom tooltips through CSS.

The problem is that the link inside of the article is dead, and I am not such a good html/css guy to be able to understand how to do this. Can anyone help?

解决方案

JSFiddle is here. Note: The original content is here.

HTML

<p>Vestibulum mollis mauris <a href="#" class="tooltip" title="Sample tooltip">pellentesque</a></p>

CSS

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #c00;
    text-decoration: none;
}

.tooltip:hover:after {
    background: #111;
    background: rgba(0,0,0,.8);
    border-radius: .5em;
    bottom: 1.35em;
    color: #fff;
    content: attr(title);
    display: block;
    left: 1em;
    padding: .3em 1em;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
}

.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

这篇关于如何使用css伪元素创建自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！