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

在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             }
 28             #demo tooltip{
 29                 color: #3CC4A9;
 30                 cursor: help;
 31             }
 32             .tooltip-box{
 33                 display: block;
 34                 line-height: 1.6;
 35                 background-color: #fff;
 36                 border: 1px solid #666;
 37                 font-size: 12px;
 38                 border-radius: 5px;
 39                 overflow: auto;
 40             }
 41         </style>
 42     </head>
 43     <body>
 44         <div id="demo">
 45             <h2>实现tooltip的效果</h2>
 46             <hr />
 47             <p>
 48                 渭城朝雨浥轻尘,客舍青青柳色新。劝君更尽一杯酒,西出阳关无故人。这首诗是著名诗人<a class="tooltip" id="tooltip1">王勃</a>的作品。借此来表达自己对友人的依依惜别之意。
 49             </p>
 50
 51             <p>
 52                 我喜欢古诗,因为它能给别人更多的理解,想象。古诗是很唯美的,随处可见的美景,比如<a class="tooltip" id="tooltip2">荷花</a>,便有,接天莲叶无穷碧,映日荷花别样红。多美的诗呀!
 53             </p>
 54         </div>
 55         <script>
 56             var className = ‘tooltip-box‘;
 57
 58             var isIE = navigator.userAgent.indexOf(‘MSIE‘) > -1;
 59
 60             function showTooltip(obj, id, html, width, height) {
 61         if (document.getElementById(id) == null) {
 62
 63             var tooltipBox;
 64             tooltipBox = document.createElement(‘div‘);
 65             tooltipBox.className = className;
 66             tooltipBox.id = id;
 67             tooltipBox.innerHTML = html;
 68
 69             obj.appendChild(tooltipBox);
 70
 71             tooltipBox.style.width = width ? width + ‘px‘ : ‘auto‘;
 72             tooltipBox.style.height = height ? height + ‘px‘ : ‘auto‘;
 73
 74             if (!width && isIE) {
 75                 tooltipBox.style.width = tooltipBox.offsetWidth;
 76             }
 77
 78             tooltipBox.style.position = "absolute";
 79             tooltipBox.style.display = "block";
 80
 81             var left = obj.offsetLeft;
 82             var top = obj.offsetTop + 20;
 83
 84             if (left + tooltipBox.offsetWidth > document.body.clientWidth) {
 85                 var demoLeft = document.getElementById("demo").offsetLeft;
 86                 left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft;
 87                 if (left < 0) left = 0;
 88             }
 89
 90             tooltipBox.style.left = left + ‘px‘;
 91             tooltipBox.style.top = top + ‘px‘;
 92
 93             obj.onmouseleave = function () {
 94                 setTimeout(function () {
 95                     document.getElementById(id).style.display = "none";
 96                 }, 100);
 97             };
 98
 99         } else {
100             document.getElementById(id).style.display = "block";
101         }
102     }
103
104
105             var t1 =document.getElementById("tooltip1");
106             t1.onmouseenter = function(){
107                 showTooltip(this,"t1","唐代诗人,唐初四大才子之一",150);
108             }
109
110             var t2 =document.getElementById("tooltip2");
111             t2.onmouseenter = function(){
112                 showTooltip(this, "t4", ‘<img src="img/1.jpg" width="400" /> ‘, 400);
113             }
114
115         </script>
116     </body>
117 </html>

现在开始来解析代码:

html部分和css比较简单和基础,看看就明白了。重点来看js部分的代码:

showTooltip这个函数就是让它显示的

这一段代码的作用就是,当将页面变小的时候,判断tooltip的提示框的宽度,如果宽度太大,但是屏幕太小,那就随着整个屏幕的大小进行变化。

var top = obj.offsetTop +20,之所以要加上20,是因为需要出现在提示对象的下方,如果没有这个20,那么提示框便会将其覆盖。

mouseleave,鼠标离开时,要执行的函数——延迟消失。

setTimeout(function,延迟的时间),时间的单位是毫秒。setTimeout函数在关于动画这一方面用的比较多,常用于动画的延迟等,与之对应的函数还有clearTimeout函数,它的作用是除去setTimeout的效果,用法:

var t1 = setTimeout(function, 3000);

clearTimeout(t1);

上面的代码主要是讲以一个图片和一些解释性文字组成的tooltip框,其他的以此类推。

虽然这个特效比较小,但是还是很奇妙的。

时间: 2024-11-02 23:23:31

原生js实现tooltip提示框的效果的相关文章

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法,,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class="easyui-tooltip">Hover Me <

CSS3实现Tooltip提示框飞入飞出动画

我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观不怎么好看.今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框,提示框伴有飞入飞出的动画效果.先来看看效果图. 看上去还简单吧,其实实现的思路的确很简单. 具体效果我们可以在这里查看在线演示. 接下来我们来简单分析一下这个Tooltip实现的CSS3代码. 首先是HTML代码,主要是构造了3个小图标菜单以及对应的Tooltip提示

tooltip提示框组件

Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含任何来自页面的或者通过ajax生成的html元素. 1.创建提示框 从标记创建提示框(tooltip),添加'easyui-tooltip' class到元素,不需要任何的javascript代码 <a href="#" title="This is the tooltip

使用css实现全兼容tooltip提示框

在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就得到一个基本的tooltip,但是没有边框看起来总是不舒服,我们可以给div盒子设置一个边框,这没什么难

支持鼠标跟随的JS+CSS链接提示框

觉得纯css的tips限制有点大,而且好像兼容性也不好,这是我发现的一个Js+CSS的链接提示框效果,还会跟随鼠标而移动,而且兼容性也不错,代码与大家分享:前端分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yah

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

MFC中添加ToolTip提示框

PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型成员,并在适当的地方将其初始化如下: m_ToolTipCtrl.Create(this); m_ToolTipCtrl.AddTool(GetDlgItem(IDC_BUTTON1), _T("This is ToolTip")); m_ToolTipCtrl.SetMaxTipWidt

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co