PHP前端开发

如何使用 CSS 正确定位工具提示

百变鹏仔 3个月前 (09-20) #CSS
文章标签 如何使用

要正确定位工具提示,请使用 right、left、top 和 Bottom 属性。

让我们看看如何将工具提示定位在右侧:

示例

现场演示

<!DOCTYPE html><html>   <style>      .mytooltip .mytext {         visibility: hidden;         width: 140px;         background-color: blue;         color: #fff;         z-index: 1;         top: -6px;         left: 100%;         text-align: center;         border-radius: 6px;         padding: 5px 0;         position: absolute;      }      .mytooltip {         position: relative;         display: inline-block;      }      .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>