JavaScript实现短暂提示框功能

2024-08-21 15:38:48

业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入ToolTip.js和ToolTip.css

主方法：ToolTip.show（需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽（可不指定）, 高（可不指定））;

ToolTip.show（obj, id, html, width, height）;

效果如下：

1.显示文本：

2:显示图片

3:显示网站

js代码：F:\Html5\Plugins\ToolTip\js\ToolTip.js

(function () {
 var ToolTip = {};
 /**
 * 显示函数
 */
 ToolTip._showTip = function (parentId, childId, html, width, height) {
 var parent = document.getElementById(parentId)//要提示的元素
 var child = document.getElementById(childId);
 if (child === null) {//创建
  var toolTip = document.createElement("div");
  toolTip.classList = "ui-tooltip-box";
  toolTip.id = childId;
  toolTip.innerHTML = html;
  parent.appendChild(toolTip);
  toolTip.style.width = width ? width + "px" : "auto"
  toolTip.style.height = height ? height + "px" : "auto"
  //定位：
  toolTip.style.position = "absolute";
  toolTip.style.display = "block";
  var left = parent.offsetLeft;
  var top = parent.offsetTop;
  if (left + toolTip.offsetWidth > document.body.clientWidth) {
  left = document.body.clientWidth / 2;
  }
  toolTip.style.left = left + "px";
  toolTip.style.top = top + 20 + "px";
  parent.onmouseleave = function (ev) {
  setTimeout(function () { //延迟：
   document.getElementById(childId).style.display = "none";//隐藏
  }, 300);
  }
 } else {
  //显示
  document.getElementById(childId).style.display = "block";
 }
 },
 /**
  * 调用入口
  */
 ToolTip.show = function (parentId, childId, html, width, height) {
  var parent = document.getElementById(obj)
  parent.onmouseenter = function (ev) {
  ToolTip._showTip(parentId, childId, html, width, height)
  }
 }
 window.ToolTip = ToolTip;
})();//为防止污染，将方法写在匿名函数中

html代码：F:\Html5\Plugins\ToolTip\ToolTip.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>提示框</title>
 <link rel="stylesheet" type="text/css" href="ToolTip.css" rel="external nofollow" >
</head>
<body>
<div class="ui-tooltip-demo">
 <p><a class="ui-tooltip" id="tooltip-text">唐诗</a></p>
 <p><a class="ui-tooltip" id="tooltip-photo">背景图片</a></p>
 <p><a class="ui-tooltip" id="tooltip-poem">Yi人诗社</a></p>
</div>
<script src="js/ToolTip.js"></script>
<script>
//调用方式
 ToolTip.show("tooltip-text", "01", "唐诗泛指创作于唐朝的诗" +
 "。唐诗是中华民族最珍贵的文化遗产之一，是" +
 "中华文化宝库中的一颗明珠，" +
 "同时也对世界上许多民族和国家的文化发展产生了很大影响，" +
 "对于后人研究唐代的政治、民情、风俗、" +
 "文化等都有重要的参考意义和价值。",300,90);
 ToolTip.show("tooltip-photo", "02", "<img src=\"imgs/bg.jpg\" height=\"80px\">",150,80);
 var html='<iframe src="http://www.toly.top" width="480px" height="300px"/>'
 ToolTip.show("tooltip-poem", "03", html);
</script>
</body>
</html>

css代码：F:\Html5\Plugins\ToolTip\ToolTip.css

body {
 font-size: 14px;
 line-height: 1.8;
 background-image: url("imgs/bg.jpg");
}
.ui-tooltip-demo {
 width: 500px;
 margin: 30px auto;
 padding: 20px 30px;
 background-color: rgba(100%, 100%, 100%, 0.4);
 border-radius: 10px;
 text-align: center;
 box-shadow: 2px 1px 0px 3px rgba(0, 0, 0, 0.2);
}
.ui-tooltip-demo .ui-tooltip {
 color: #03f;
 font-size: 18px;
 cursor: help;
}
.ui-tooltip-box {
 display: block;
 background: #fff;
 line-height: 1.6;
 border: 1px solid #6cf;
 color: #333;
 padding: 20px;
 font-size: 12px;
 border-radius: 5px;
 overflow: auto;
}

总结

以上所述是小编给大家介绍的JavaScript实现短暂提示框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JavaScript实现短暂提示框功能

业务场景:当鼠标移入某元素时,显示提示框进行介绍.当鼠标移除时,会自动消失.引入ToolTip.js和ToolTip.css 主方法:ToolTip.show(需要提示的元素id, 随意不重复即可, 要提示的html文本, 宽(可不指定), 高(可不指定)); ToolTip.show(obj, id, html, width, height); 效果如下: 1.显示文本: 2:显示图片 3:显示网站 js代码:F:\Html5\Plugins\ToolTip\js\ToolTip.js (fu
C#实现倒计时关闭提示框功能

前两天实现某个功能需要做一个提示框并且能够自动关闭的,就从网上搜了一个能够自动关闭的提示框 ,但由于我需要的场景是不确定计时时间的,所以并没有使用到该窗体,但是我觉得可以留存备用 ,后边也把我这种倒计时的提示框用处还是很多的,用于自动弹窗自动关闭 ,虽然在我的项目中没有其核心方法在 timer(TimerCallBack,Object,int32,int32) TimerCallBack 是一个委托 ,代表要执行的方法,其用途可以用在各个定时去调用方法的场景,而且可以设置窗体的FormBo
javascript实现倒计时提示框

本文实例为大家分享了javascript实现倒计时提示框的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JavaScript中通过提示框跳转页面的方法

通过提示框跳转页面具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-"> <title>Document</title> </head> <body> <script> window.onload = function(){ //设置当页面加载时执行 var btn =do
给WordPress的编辑后台添加提示框的代码实例分享

WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi
JS延时提示框实现方法详解

本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi
unity自定义弹出框功能

本文实例为大家分享了unity自定义弹出框的具体方法,供大家参考,具体内容如下一.弹出框的搭建布局如图:Message为整个父物体,并且添加UiMessage代码.panel为遮罩. MessageBox为整个提示框,Panel为标题,ok为确定按钮,cancel为取消按钮,retry为重试按钮,Text为提示框的文字. 注意大小写,后面代码会根据名称进行获取对应组建. 效果如下: 二.MessageBox代码要说明的都在代码中注释了.仿照Windows的提示框功能,如果功能不足可自行添加
JavaScript实现的文本框placeholder提示文字功能示例

本文实例讲述了JavaScript实现的文本框placeholder提示文字功能.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS文本框placeholder提示</titl
javascript搜索自动提示功能的实现第1/3页

使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能一如往常,demo和源码的zip包在文章最后,慢慢欣赏吧! 我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做.而知道这些可以让你对这个插件可以进一步的按自己的需求定制(关于这一点我在我的blog里写过不少关于其他应用的文章). 好,我们现在开始. JavaScript代码: 复制代码代码如下: <script src=&quo
javascript实现延时显示提示框特效代码

本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法.分享给大家供大家参考.具体如下: 先给大家展示一个延迟/定时/强制弹出窗口的JS代码参数解释: 设置时间:Then.setTime(Then.getTime() + 1*60*60*1000) mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页 scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏)

JavaScript实现短暂提示框功能

相关推荐

随机推荐