tooltip(title美化)教程——jquery的特效

浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。

首先复制下面代码到网站底部:

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即可,样式自己修改即可,如下:

.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:#6F8EC5}.tipsy-inner{background-color:#6F8EC5;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}

我这里用的蓝叶大佬的css,他的样式清新简洁。

这个功能需要引入jquery才能实现。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

【已解决】Xcode代码提示变量为Error Type

我之前使用Masonry布局时候经常需要设置偏移量,但是呢在设置布局哪里设置死数据不方便进行调试更换就想用一个变量。

1231
来自专栏jianhuicode

React问题集序

问题描述 antd version: 2.7.4 OS and its version: windows7 Browser and its version: C...

2176
来自专栏一“技”之长

Swift学习第二练——Swift项目时光电影

    很早以前的一个OC的练习项目,用swift重新写了一遍,因为xcode版本的更新对swift的兼容度也在不断改变,此版本适用于xcode6.1。

895
来自专栏雨尘分享

iOS 点击推送消息跳转指定界面 —总结篇app 在后台app被杀死

1.7K6
来自专栏iOS 开发杂谈

App的生命周期

注意: application:didFinishLaunchingWithOptions:: App 首次启动时调用,一般在这个函数里创建 window 对...

2161
来自专栏進无尽的文章

推送-JPush(极光推送)的使用

推送服务可以说是所有 App 的标配,不论是哪种类型的 App,推送都从很大程度上决定了 App 的 打开率、使用率、存活率 。因此,熟知并掌握推送原理及方法,...

7391
来自专栏iOS开发日记

iOS开发系列——第一个iOS程序和运行过程

这里我想强调一下,前面的知识是你日后开发IOS的基础,没有那些知识你开发IOS会很痛苦,现在很多开发人员做开发都是一知半解,程序质量确实令人担忧,所以还是希望大...

4036
来自专栏娱乐心理测试

iOS 如何把图片资源打包成bundle文件及遇到的坑(详解)

(1.)"Base SDK" 设置为 "Latest iOS (iOS 11.2)" (Xcode 9.2为例)

1972
来自专栏一“技”之长

iOS9系列专题二——全新的搜索功能api 原

        iOS9中为我们提供了许多新的api,搜索功能的加强无疑是其中比较显眼的一个。首先,我们先设想一下:如果在你的app中定义一种标识符,在siri...

935
来自专栏青玉伏案

IOS开发之新浪围脖

  IOS开发和Web开发一样,网络请求方式包括Get和Post方式。Get和Post两者有和特点和区别,在本篇博客中不做过多的论述,本篇的重点在于如何GET数...

2075

扫码关注云+社区