第一步

放以下js到公用js里面

var sweetTitles = {x: 10,y: 20,tipElements: "a,span,img,div ",noTitle: false,init: function() {var b = this.noTitle;$(this.tipElements).each(function() {$(this).mouseover(function(e) {if (b) {isTitle = true} else {isTitle = $.trim(this.title) != ''}if (isTitle) {this.myTitle = this.title;this.title = "";var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";$('body').append(a);$('.tooltip').css({"top": (e.pageY + 20) + "px","left": (e.pageX - 20) + "px"}).show('fast')}}).mouseout(function() {if (this.myTitle != null) {this.title = this.myTitle;$('.tooltip').remove()}}).mousemove(function(e) {$('.tooltip').css({"top": (e.pageY + 20) + "px","left": (e.pageX - 20) + "px"})})})}
};
$(function() {sweetTitles.init()
});

第二步

css也是

/*tips*/.tooltip {font-size:12px;position:absolute;padding:5px;z-index:100000;opacity:.8;font-family:Microsoft Yahei
}
.tipsy-arrow {position:absolute;width:0;height:0;line-height:0;border:6px dashed #000;top:0;left:20%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent
}
.tipsy-arrow-n {border-bottom-color:#666
}
.tipsy-inner {background-color:#666;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px
}

网站 tooltip和title提示美化教程相关推荐

html5 搜索提示文字,HTML5网页placeholder美化input背景提示文字教程
这篇文章主要为大家详细介绍了HTML5网页placeholder美化input背景提示文字教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 今天要给大家介绍的 ...
自己定义html中a标签的title提示tooltip
自己定义html中a标签的title提示tooltip 简单介绍用简单的jquery+CSS创建自己定义的a标签title提示.用来取代浏览器默认行为.如图: Javascript代码 $(func ...
博客园美化教程大集合----极致个性化你的专属博客（超详细，看这篇就够了）...
阅读目录: 1. 前言 2. 定制自己的博客 00. 美化整体效果 01. 准备工作 02. 自定义个性化导航栏 03. 添加顶部博主信息 04. 添加顶部滚动公告 05. 为博客文章添加目录导航 0 ...
面向开发人员的 ChatGPT 提示词教程 - ChatGPT Prompt Engineering for Developers
面向开发人员的 ChatGPT 提示词教程 - ChatGPT Prompt Engineering for Developers 1. 指南(原文: Guidelines) 1-1. 提示的指南(原 ...
面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版
面向开发人员的 ChatGPT 提示词教程中文版 - ChatGPT 版 1. 指南 1-1. 提示的指南 1-2. 配置 1-3. 提示语原则原则 1: 写出清晰而具体的指示技巧 1: 使用分隔 ...
Ventoy安装及美化教程
一.效果展示 1, 根据不同的image显示不同logo 2,增加倒计时条,在无人操作时候,可以根据提前设定的配置,自动进入安装流程二. Ventoy安装教程 1.软件下载及问题处理 Ventoy官 ...
Ubuntu 20.04更换主题美化教程
Ubuntu 20.04美化教程本文章部分来自其他作者,在其基础上进行补充修改先来看一波效果图.个人比较喜欢黑色的风格,看了这个教程之后,其实思路是一样的. 准备工作与美化思路先安装一些扩展软件 ...
子比zibll主题外链重定向go页面美化教程
目录效果教程开始原文地址:[子比zibll主题外链重定向go页面美化教程](https://www.lbxz68.com/539/) 效果教程开始效果如上,将以下代码覆盖掉子比主题的go.p ...
Ubuntu18.04主题美化教程
效果图: 步骤: 1.先安装美化管理工具gnome-tweak-tool,命令:sudo apt install gnome-tweak-tool 2.安装Gnome-shell Extensions ...

网站 tooltip和title提示美化教程

美化演示：

第一步

第二步

css也是

网站 tooltip和title提示美化教程相关推荐

最新文章

热门文章