使用 CSS 将箭头指向工具提示顶部

百变鹏仔 4个月前 (09-20) #CSS

文章标签箭头

使用 bottomCSS 属性将箭头添加到工具提示的顶部。

示例

您可以尝试运行以下代码来添加带有指向顶部的箭头的工具提示：

实时演示

<!DOCTYPE html><html>   <style>      .mytooltip .mytext {         visibility: hidden;         width: 140px;         background-color: blue;         color: #fff;         z-index: 1;         top: 150%;         left: 50%;         margin-left: -60px;         text-align: center;         border-radius: 6px;         padding: 5px 0;         position: absolute;      }      .mytooltip {         position: relative;         display: inline-block;      }      .mytooltip .mytext:after {         content: "";         position: absolute;         bottom: 100%;         left: 50%;         margin-left: -10px;         border-width: 3px;         border-style: solid;         border-color: transparent transparent blue transparent;      }      .mytooltip:hover .mytext {         visibility: visible;      }   </style>   <body>      <div class = "mytooltip">Keep mouse cursor over me         <span class = "mytext"> My Tooltip text</span>      </div>   </body></html>

文章推荐

使用 CSS 将箭头指向工具提示顶部

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写