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 条评论
登录 后参与评论

相关文章

来自专栏iOS 开发杂谈

App的生命周期

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

25010
来自专栏一“技”之长

iOS运用runtime全局修改UILabel的默认字体

        在项目比较成熟的基础上,遇到了这样一个需求,应用中需要引入新的字体,需要更换所有Label的默认字体,但是同时,对于一些特殊设置了字体的labe...

15150
来自专栏.NET开发那点事

angularjs的表单验证

angularjs内置了常用的表单验证指令,比如min,require等。下面是演示:

8300
来自专栏逸鹏说道

AutoFac在项目中的应用

技能大全:http://www.cnblogs.com/dunitian/p/4822808.html#skill 完整Demo:https://github....

37160
来自专栏青玉伏案

IOS开发之新浪围脖

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

23550
来自专栏Guangdong Qi

iOS 9 UIWebView不能加载百度和控制电池条字体颜色

今天写了一个UIWebView给H5的妹子测试,本来很简单的东西,不应该出错的,但是还是有错,而且还是两个

9620
来自专栏雨尘分享

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

2.3K60
来自专栏xx_Cc的学习总结专栏

iOS-控制器View的创建和生命周期

36060
来自专栏一“技”之长

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

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

11750
来自专栏娱乐心理测试

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

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

36320

扫码关注云+社区

领取腾讯云代金券