业务场景：当鼠标移入某元素时，显示提示框进行介绍。当鼠标移除时，会自动消失。引入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">

 </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;

 }

js实现短暂提示框的更多相关文章

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

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  2. 【JS学习笔记】第一个JS效果——鼠标提示框

    分析效果实现原理--鼠标提示框 样式:div的display 事件:onmouseover,onmouseout 编写JS的流程 布局:HTML+CSS 属性:确定需要修改哪些属性 事件:确定用户做哪 ...

  3. 有关js弹出提示框几种方法

    1直接提示只有确定功能的提示框 只显示提示信息 alert(“提示信息”); alert ();的参数只有一个就是提示信息,无返回值 2 弹出输入框让你输入内容 prompt() ; 有两个参数:第一 ...

  4. JS实现动态提示框

    引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...

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

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

  6. 弹出框四 之toastr.js （完成提示框）

    1.下载 toastr.js组件 2. $(function () { toastr.success('提交数据成功'); toastr.error('Error'); toastr.warning( ...

  7. 修改js confirm alert 提示框文字

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

  9. sweetalert提示框

    文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...

随机推荐

  1. C++堆栈详解

    一.预备知识-程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)- 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈. ...

  2. IT连创业系列：新的一年，先淫文一篇！

    办公室窗外,有鸟声〜〜 在IT连创业走过的日子里,这是我第一次听见鸟声. 也许,是曾经的忙碌,封锁了自己的心眼. 岁月秒秒: 当初燃烧的火焰,从红,烧成了蓝. 曾经的内心湃澎,化成了平淡坚持. 但这, ...

  3. C#：继承过程中的静态成员

    在知乎上看到一个关于"泛基"的实现,感觉挺有意思,想试试效果,代码如下: public abstract class MyBase<T> where T : MyBas ...

  4. spring整合mybatis(hibernate)配置

    一.Spring整合配置Mybatis spring整合mybatis可以不需要mybatis-config.xml配置文件,直接通过spring配置文件一步到位.一般需要具备如下几个基本配置. 1. ...

  5. JS 装饰器解析

    随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...

  6. Starting a Gradle Daemon, 5 busy and 1 incompatible and 1 stopped Daemons could not be reused, use --status for details FAILURE: Build failed with an exception. * What went wrong: Could not dispatch

    执行gradle build出的问题,查看hs_err_pid11064.log日志文件发现,是电脑的RAM不足导致

  7. Laravel框架中的make方法详解

    为什么网上已经有这么多的介绍Laravel的执行流程了,Laravel的容器详解了,Laravel的特性了,Laravel的启动过程了之类的文章,我还要来再分享呢? 因为,每个人的思维方式和方向是不一 ...

  8. [HAOI2016] 放棋子及错排问题

    题目 Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在这个矩阵上放N枚棋子(障碍的位置不能放棋子),要求你放N个棋子也满足 ...

  9. thinkphp5多图上传 js部分

    在项目中常会用到多图上上传,那就需要多图上传后需要预览,并且能删掉传错(不想传)的图,然而 测试了半天 并不知道jq怎么写,parent()parents()用了半天无果,罢了,还是用原生js来写.这 ...

  10. Java飞机大战源代码

    刚学不久java,做了一个飞机大战的小小小小游戏,现在把这个思路总结以及代码分享出来.大佬别吐槽(emmmmmm .....开发环境:jdk1.7 开发工具:eclipese PlanelJPanel ...