html结构

要实现给定义的节点添加提示效果，需要首先需要添加自定义属性data-title，这是data-title是空的，然后通过js把title的值放到里面

<span title="this is a title 1" deta-title>title1</span>

关键的CSS设置

首先给我们自定义的data-title属性添加一个相对定位
设置伪元素content: attr()的值为deta-title content: attr(deta-title)的值，获取到data-tiltle的值
伪元素设置绝对位置来调整一下位置
伪元素设置white-space: nowrap;使其内容不换行
隐藏伪元素，如果需要添加隐藏动画效果，可以使用visibility: hidden;来隐藏，如果不需要动画效果的话，可以直接使用display:none;
通过添加:hover来控制伪元素来显示
CSS代码实现

[deta-title]{position: relative;
}
[deta-title]:after{content: attr(deta-title);position: absolute;left: 0;bottom: 100%;white-space: nowrap;visibility: hidden;
}
[deta-title]:hover:after{visibility: visible;
}

js实现提示效果

查找所有拥有data-title属性的节点
遍历所有的data-title
把title的值赋给data-title
删除title属性
js实现如下

function detaTitle(){var deta_title = document.querySelectorAll("[deta-title]");console.log(deta_title);for (var i = 0; i < deta_title.length; i++){deta_title[i].setAttribute("deta-title",deta_title[i].getAttribute("title"));deta_title[i].removeAttribute("title");}
}
detaTitle();

自定义属性title提示完整代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>title</title><style>body{background-color: #ccc;text-align: center;padding-top: 200px;}a{text-decoration: none;color: #555;}[deta-title]{position: relative;margin: 0 20px;}[deta-title]:after{content: attr(deta-title);position: absolute;left: 50%;bottom: 100%;transform: translate(-50%,0);color: #fff;text-shadow: 0 -1px 0px black;box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);background: #383838;border-radius: 2px;padding: 3px 10px;font-size: 12px;white-space: nowrap;transition:all .3s;opacity: 0;visibility: hidden;}[deta-title]:hover:after{transition-delay: 100ms;visibility: visible;transform: translate(-50%,-6px);opacity: 1;}</style>
</head>
<body>
<span title="this is a title 1" deta-title>title1</span>
<span title="this is a title 2" deta-title>title2</span>
<span title="this is a title 3" deta-title>title3</span><script>
function detaTitle(){var deta_title = document.querySelectorAll("[deta-title]");console.log(deta_title);for (var i = 0; i < deta_title.length; i++){deta_title[i].setAttribute("deta-title",deta_title[i].getAttribute("title"));deta_title[i].removeAttribute("title");}
}
detaTitle();
</script>
</body>
</html>

实现效果

js实现自定义title提示效果相关推荐

js 自定义title提示框(附加文本框内容验证) (II)
在上一篇的基础上添加了一个小功能,验证文本框是否为空和数字效果图页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
js实现HTML标题栏中新消息提示效果
js实现HTML标题栏中新消息提示效果标题栏新消息提示如图: 移民百科的项目中用到了这个新消息提示的效果,主要用于提示用户有新消息.具体实现代码如下: 新消息提示 var newMessageRem ...
jQuery实现的简单文字提示效果模拟title
模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <script src="jquery.j ...
JS/CSS 各种操作信息提示效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 < ...
Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码代码如下: $(function() { $("a[title] ...
Fort.js – 时尚、现代的进度提示效果
Fort.js 是表单填写进度提示效果的 JavaScript 库,使用非常简单. 提供了Default.Gradient.Sections 以及 Flash 四种效果用Fort.js很简单,很简单 ...
js实现title滚动效果
js实现title滚动效果原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了方式一 var titleText = "您有新订单,请及时处理!".s ...
html5邮箱提示信息,JS实现的邮箱提示补全效果示例
本文实例讲述了JS实现的邮箱提示补全效果.分享给大家供大家参考,具体如下: 现在要实现的是类似网易登录时的邮箱提示框的效果,不过这里我打算稍微改变一下,就是在输入@的时候再出现邮箱提示列表实现提示的 ...

js实现自定义title提示效果

html结构

关键的CSS设置

js实现提示效果

js实现自定义title提示效果相关推荐

最新文章

热门文章