<html>

<head>

<meta charset="utf-8">

    <title>无标题页</title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<script type="text/javascript" language="javascript">

$(function(){

    var x=;

    var y=;

    $("a.tooltip").mouseover(function(e){

        this.myTitle=this.title;

        this.title="";

        var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";   //创建DIV元素

        $("#link").append(tooltip);  //追加到文档中

        $("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"}).show(); //设置X  Y坐标， 并且显示

    }).mouseout(function(){

        this.title=this.myTitle;

        $("#tooltip").remove();    //移除

    }).mousemove(function(e){

        $("#tooltip").css({"top": (e.pageY+y) + "px","left": (e.pageX+x) + "px"});

    })

})

</script>

<style>

#tooltip{

    border:1px solid red;

    background:#FF6;

    position:absolute;

    padding:1px;

    color:#;

    display:none;

}

</style>

</head>

<body>

<div id="link">

    <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>

    <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>

    <p><a href="#" title="这是我的超链接提示1">自带提示1</a></p>

    <p><a href="#" title="这是我的超链接提示2">自带提示2</a></p>

</div>

</body>

</html>

title属性：
　　使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

<a href="http://www.baidu.cn" title = "百度的的中文站点">百度网站</a>

　　如果希望注释多行显示，可以使用 作为换行符。

<a href="http://www.baidu.cn" title = "百度的
中文站点">百度网站</a>

手写一个关于title属性自定义提示框解决浏览器（IE）不兼容问题的更多相关文章

  1. 放弃antd table，基于React手写一个虚拟滚动的表格

    缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...

  2. 剖析手写Vue，你也可以手写一个MVVM框架

    剖析手写Vue,你也可以手写一个MVVM框架# 邮箱:563995050@qq.com github: https://github.com/xiaoqiuxiong 作者:肖秋雄(eddy) 温馨提 ...

  3. 手把手教你手写一个最简单的 Spring Boot Starter

    欢迎关注微信公众号:「Java之言」技术文章持续更新,请持续关注...... 第一时间学习最新技术文章 领取最新技术学习资料视频 最新互联网资讯和面试经验 何为 Starter ? 想必大家都使用过 ...

  4. 浅析MyBatis（二）：手写一个自己的MyBatis简单框架

    在上一篇文章中,我们由一个快速案例剖析了 MyBatis 的整体架构与整体运行流程,在本篇文章中笔者会根据 MyBatis 的运行流程手写一个自定义 MyBatis 简单框架,在实践中加深对 MyBa ...

  5. 『练手』手写一个独立Json算法 JsonHelper

    背景: > 一直使用 Newtonsoft.Json.dll 也算挺稳定的. > 但这个框架也挺闹心的: > 1.影响编译失败:https://www.cnblogs.com/zih ...

  6. 教你如何使用Java手写一个基于链表的队列

    在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...

  7. 【spring】-- 手写一个最简单的IOC框架

    1.什么是springIOC IOC就是把每一个bean(实体类)与bean(实体了)之间的关系交给第三方容器进行管理. 如果我们手写一个最最简单的IOC,最终效果是怎样呢? xml配置: <b ...

  8. 只会用就out了，手写一个符合规范的Promise

    Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Prom ...

  9. webview的简单介绍和手写一个H5套壳的webview

    1.webview是什么?作用是什么?和浏览器有什么关系? Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做 ...

随机推荐

  1. JAVAEE——SSH项目实战04：联系人添加、列表显示和修改

    作者: kent鹏 转载请注明出处: http://www.cnblogs.com/xieyupeng/p/7159337.html 一.联系人添加 1.添加页面设计    linkman/list. ...

  2. Eclipse导入SVN项目的三种方式

    Eclipse导入SVN项目的三种方式 一.直接Import导入: 1.点击 File --> Import,进入导入项目窗口 2.选择从SVN检出项目,点击Next 3.选择创建新的资源库位置 ...

  3. CSS基础-DAY2

    CSS属性操作-文本 文本颜色 <head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色, ...

  4. [ 转载 ] Java基础10--关于Object类下所有方法的简单解析

    关于Object类下所有方法的简单解析 类Object是类层次结构的根类,是每一个类的父类,所有的对象包括数组,String,Integer等包装类,所以了解Object是很有必要的,话不多说,我们直 ...

  5. leetcode 链表 两数相加

     两数相加     给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...

  6. win 10 文件夹 背景 没效果

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha  313134555@qq.com

  7. Codeforces Round #222 (Div. 1) C. Captains Mode 状压

    C. Captains Mode 题目连接: http://codeforces.com/contest/377/problem/C Description Kostya is a progamer ...

  8. ROW_NUMBER() OVER函数运用

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) PARTITION BY:相当于数据库中的group by 说明:row_numbe ...

  9. linux_jdk_mysql_tomcat

    1 linux下安装jdk的步骤: 0. 查找原有的jdk: rpm -qa | grep java 删除原有的jdk: rpm -e --nodeps java-1.7.0-openjdk-1.7. ...

  10. weblogic安装使用: Could not Create the Java Virtual Machine

    第一次使用weblogic,完全不明白是怎么一回事!找安装包花了大把时间!找到了不知道怎么安装 -- _ --||| 找了一篇安装文档<weblogic 安装部署手册.doc>, 位于:[ ...