原生js实现tooltip提示框的效果

最新推荐文章于 2024-07-05 08:57:33 发布

qkecki24028

最新推荐文章于 2024-07-05 08:57:33 发布

阅读量2k

点赞数 3

本文链接：https://blog.csdn.net/qkecki24028/article/details/54632534

版权

本文介绍了如何使用原生JavaScript创建tooltip提示框效果。通过分析代码，解释了html、css的基础部分以及js中的showTooltip函数，该函数在屏幕尺寸变化时调整提示框宽度。还提到了鼠标离开时的延迟消失效果，以及setTimeout和setInterval在动画延迟和周期性执行中的应用。

摘要由CSDN通过智能技术生成

在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。

比如这个tooltip的效果展示：

这个便是tooltip提示框的效果。

在Hbulider上的代码展示：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>ToolTip</title>
  6         <style type="text/css">
  7             .body{
   
  8                 width: 500px;
  9                 height: 600px;
 10                 font-size: 14px;
 11                 background-color: #eee;
 12             }
 13             #demo{
   
 14                 width: 400px;
 15                 
 16                 margin: auto;
 17                 position: relative;
 18                 border-radius: 10px;
 19                 background-color: #ccc;
 20                 box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);
 21             }
 22             #demo a{
   
 23                 color: #11C2EE;
 24             }
 25             #demo h2{
   
 26                 color: #3CC4A9;
 27

最低0.47元/天解锁文章

qkecki24028

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现tooltip提示框的效果

在js的世界里面，每一个小的特效都那么微不足道，却又那么的令人向往与好奇。前端工程师的任务特别高大上，因为他们的一个小小的设计就会激发别人的求知欲。比如说我，只是随机一瞟，便看到了这个tooltip的特效，就有一种想要征服它的愿望。比如这个tooltip的效果展示：这个便是tooltip提示框的效果。在Hbulider上的代码展示： 1 DOCTYPE htm
复制链接

扫一扫