使用html+css+js代码实现 Tooltip气泡提示框

最新推荐文章于 2024-02-18 11:26:55 发布

学弟不想努力了

最新推荐文章于 2024-02-18 11:26:55 发布

阅读量3k

点赞数 4

分类专栏： JavaScript HTML/CSS 文章标签： javascript css html5

本文链接：https://blog.csdn.net/Eternal_Blue/article/details/104413810

版权

HTML/CSS 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

在前端开发过程中，需求与项目引入的组件插件有点出入，所以自己封装一个Tooltip气泡提示框

查了些资料，都是纯背景色的，无法解决边框线，即便能改，气泡三角和矩形之间也会出现出现边框线。

我这里为了解决能够修改边框线的颜色，重新写了解决方案。

原理：一个主体矩形+两个相同的三角形，根据两个三角形之间垂直方向的位移，形成边缝线。（其中底层带边框的三角上移，前面带背景色的三角下移）

原理图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<style>
  /* 矩形 */
  #tag {
    width: 150px;
    height: 50px;
    border: 2px solid red;
    border-radius: 4px 4px;
    position: absolute;
    background-color: green;
    padding: 10px;
    display: none;
  }
  /* 文字样式 */
  #tag span {
    color: #fff;
  }
  /* 三角组合样式 */
  .arrow {
    position: absolute;
    top: -15px;
    left: 25px;
  }
  /* 底层三角 */
  .arrow .t1 {
    border-width: 8px;
    position: absolute;
    border-style: solid dashed dashed dashed;
    border-color: transparent transparent red;
    top: -3px;
  }
  /* 头层三角 */
  .arrow .t2 {
    border-width: 8px;
    position: absolute;
    border-style: solid dashed dashed dashed;
    border-color: transparent transparent green;
  }
</style>
<script>
  //鼠标进入
  function mouseOver(x){
	document.getElementById('tag').style.display = 'block';
  }
  //鼠标离开
  function mouseOut(x){
	document.getElementById('tag').style.display = 'none';
  }
</script>
</head>
<body>
  <img onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" src="smiley.jpg">
  <div id="tag">
    <div class="arrow">
      <span class="t1"></span>
      <span class="t2"></span>
    </div>
    <span>今天天气真不错！</span>
  </div>
</body>
</html>

最终效果图如下：

1.鼠标移入笑脸表情：

2.鼠标移出笑脸表情：

学弟不想努力了

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用html+css+js代码实现 Tooltip气泡提示框

在前端开发过程中，需求与项目引入的组件插件有点出入，所以自己封装一个Tooltip气泡提示框原理：一个主体矩形+两个相同的三角形，根据两个三角形之间垂直方向的位移，形成边缝线。（其中底层带边框的三角上移，前面带背景色的三角下移）原理图：<!DOCTYPE html><html><head><meta charset="utf-...
复制链接

扫一扫