放在CSS形状

Question

我有一个由CSS的圆形状，我试图把当我徘徊到了中圈出现一个提示，就如何做到这一点的任何想法的工具提示？ 这里是我的圈子代码：

#circle1 { 
 
\t width: 52px; 
 
\t height: 52px; 
 
\t background: #f5e25d; 
 
    opacity: 0.9 
 
\t -moz-border-radius: 50%; 
 
\t -webkit-border-radius: 50px; 
 
\t border-radius: 50px; 
 
}

<div id="circle1"></div>

Answer 1

您可以通过将一个HTML元素内部#circle1做到这一点（我用了span）的提示，并采用#circle1:hover显示工具提示。然后，我把一个三角形作为span的::after伪元素。我用CSS Triangle Generator来创建工具提示三角形。

.wrap { 
 
    overflow: auto; 
 
    padding: 10%; 
 
    width: 100%; 
 
    background: #eee; 
 
    box-sizing: border-box; 
 
} 
 

 
#circle1 { 
 
    display: block; 
 
    width: 52px; 
 
    height: 52px; 
 
    background: #f5e25d; 
 
    opacity: 0.9 -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    margin: 20px auto auto; 
 
    position: relative; 
 
} 
 

 
span.tooltip { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    bottom: calc(100% + 20px); 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 200px; 
 
    background: #444; 
 
    color: white; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border-radius: 4px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 

 
span.tooltip::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 10px 5px 0 5px; 
 
    border-color: #444444 transparent transparent transparent; 
 
} 
 

 
#circle1:hover span.tooltip { 
 
    visibility: visible; 
 
}

<div class="wrap"> 
 
    <a id="circle1"> 
 
    <span class="tooltip">Tooltip, baby, yeah!</span> 
 
    </a> 
 
</div>