CSS提示工具

最新推荐文章于 2023-06-18 18:40:11 发布

平平无奇的CV

最新推荐文章于 2023-06-18 18:40:11 发布

阅读量68

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_54954413/article/details/125768340

版权

CSS 提示工具定位边框交互设计

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果展示：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示工具</title>
</head>
<style>
body div{
    border: 1px solid black;
    background-color: rgb(204, 112, 112);
    color: #fff;
    margin: 10px;
}
.tooltip {/* Tooltip 容器 */
    position: relative;/*子绝父相*/
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}

.tooltip .tooltiptext {/* Tooltip 文本 */
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* 定位 */
    position: absolute;
    z-index: 1;
}
.L{
    right:  105%;
    top: -5px;
}
.U{
    bottom: 130%;
    left: 0%; 
    /* bottom: 100%;
    left: 50%; 
    margin-left: -60px; 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
.D{
    top: 130%;
    left: 0%;
    /* top: 130%;
    left: 50%;
    margin-left: -60px; */
}
.R{
    left: 105%;
    top:-5px;
}

/*右侧提示框/左侧箭头：*/
.tooltip .R::after {
    content: " ";
    position: absolute;

    top: 50%; 
    right: 100%;
    margin-top: -5px;
    border-color: transparent black transparent transparent;/*上 右 下左 顺时针*/

    border-width: 5px;
    border-style: solid;
    
}
/*底部提示框/顶部箭头：*/
.tooltip .D::after {
    content: " ";
    position: absolute;

    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-color: transparent transparent black transparent;/*上右 下 左*/

    border-width: 5px;
    border-style: solid;
    
}
/*顶部提示框/底部箭头：*/
.tooltip .U::after {
    content: " ";
    position: absolute;

    top: 100%; 
    left: 50%;
    margin-left: -5px;
    border-color: black transparent transparent transparent;/* 上 右下左*/

    border-width: 5px;
    border-style: solid;
    
}
/*左侧提示框/右侧箭头：*/
.tooltip .L::after {
    content: " ";
    position: absolute;

    top: 50%; 
    left: 100%;
    margin-top: -5px;
    border-color: transparent transparent transparent black;/*上右下 左 */

    border-width: 5px;
    border-style: solid;
   
}

.tooltip:hover .tooltiptext {/* 鼠标移动上去后显示提示框 */
    visibility: visible;
}
</style>
<body style="text-align:center;">
<br>
<div class="tooltip">鼠标移动到这-左
  <span class="tooltiptext L">提示文本</span>
</div>
<div class="tooltip">鼠标移动到这-上
    <span class="tooltiptext U">提示文本</span>
</div>
<div class="tooltip">鼠标移动到这-下
    <span class="tooltiptext D">提示文本</span>
</div>
<div class="tooltip">鼠标移动到这-右
    <span class="tooltiptext R">提示文本</span>
</div>
</body>
</html>

CSS提示工具https://www.runoob.com/css/css-tooltip.html