CSS ToolTip 实现方法1

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

蚂蚁bei大象

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

阅读量744

点赞数

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

本文链接：https://blog.csdn.net/ljbmxsm/article/details/51417726

版权

CSS 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Web

2 篇文章 0 订阅

订阅专栏

CSS

body{
    font-size: 16px;
    background-color: #48B379;
    max-width: 1200px;
    margin: 10px auto;
    padding: 10px 20px;
    color: #EEE9DC;
}

.content{
    margin: 30px 0px;
}

.tooltip{
    position: relative;
    padding: 20px 5px;
    border: 2px solid #EEE9DC;
    line-height: 4em;
    border-radius: 1em;
}

.tooltip::before,.tooltip::after{
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
}

.tooltip-left::before{
    border-right: 20px solid #EEE9DC;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    left: -20px;
    top: 50%;
    margin-top: -20px;
}

.tooltip-left::after{
    border-right: 17px solid #48B379;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    left: -17px;
    top: 50%;
    margin-top: -17px;
}


.tooltip-right::before{
    border-left: 20px solid #EEE9DC;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    right: -20px;
    top: 50%;
    margin-top: -20px;
}

.tooltip-right::after{
    border-left: 17px solid #48B379;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    right: -17px;
    top: 50%;
    margin-top: -17px;
}


.tooltip-top::before{
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #EEE9DC;
    top: -20px;
    left: 50%;
    margin-left: -20px;
}

.tooltip-top::after{
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 17px solid #48B379;
    top: -17px;
    left: 50%;
    margin-left: -17px;

}


.tooltip-bottom::before{
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #EEE9DC;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
}

.tooltip-bottom::after{
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 17px solid #48B379;
    bottom: -17px;
    left: 50%;
    margin-left: -17px;
}

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TooltipBase</title>
    <link rel="stylesheet" type="text/css" href="css/tooltipbase.css">
</head>
<body>
    <div class="content">
        <h2>left</h2>
        <div class="tooltip tooltip-left">
            在左边的tooltip
        </div>
    </div>

    <div class="content">
        <h2>right</h2>
        <div class="tooltip tooltip-right">
            在左边的tooltip
        </div>
    </div>

    <div class="content">
        <h2>top</h2>
        <div class="tooltip tooltip-top">
            在左边的tooltip
        </div>
    </div>

    <div class="content">
        <h2>bottom</h2>
        <div class="tooltip tooltip-bottom">
            在左边的tooltip
        </div>
    </div>
</body>
</html>

效果图
这里写图片描述

蚂蚁bei大象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS ToolTip 实现方法1

CSSbody{ font-size: 16px; background-color: #48B379; max-width: 1200px; margin: 10px auto; padding: 10px 20px; color: #EEE9DC;}.content{ margin: 30px 0px;}.tooltip{ po
复制链接

扫一扫