放在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>