使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码

这篇博客介绍了如何使用原生js替代H5的title属性,以实现统一的悬浮文字提示样式和延迟时间。作者提供了简单的js和html代码示例,讲解了选择器、函数的this指向以及MutationObserver的使用,适用于不考虑IE低版本的场景。
摘要由CSDN通过智能技术生成

简介

要让一个DOM元素出现悬浮文字提示,一般情况下,我们都会选择使用H5的title属性。例如:

<div title="456">123</div>

这样设置之后,当鼠标在div上悬浮过了一段时间之后,网页上鼠标位置附近就会出现悬浮文字提示,例如这样:
title但是,不同的浏览器,悬浮等待的时间和悬浮文字的样式都可能会不一样,例如chrome上显示是白底灰字,firefox上就可能是黄底黑字,时长可能是3s或者1s,如果为了确保不同浏览器的用户体验的效果趋于一致的话,那么我们就需要禁用默认的title属性,改用js手动实现悬浮文字的提示。

1.需求分析

为了提高组件的简洁性,所以这里我采用原生js进行编码,不兼容IE 6 7 8,并且没有做过渡动画,只是简单是隐藏显示,有兴趣的同学可以改用jquery重构来提高代码兼容性,用fadeIn fadeOut等动画效果代替直接的显示隐藏。
经分析,H5的title属性的作用逻辑如下:

  1. 鼠标进入元素时,延时一定时间后显示悬浮文字提示,并且当鼠标在元素内移动时移除文字提示
  2. 鼠标离开元素时,移除文字提示
  3. 文字提示为一个inline-block的div或span,固定定位,位置在鼠标位置的附近。
    因为这个组件比较简单,所以我就直接上代码啦:

2.代码解析

js和html测试代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box{
            margin-top: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box" title="456">123</div>
    <div>
        <span title="hello world!">asdjkasl</span>
        <span title="aslkdjsakl">fjksdkfj</span>
    </div>
<script>
    function test(){
        alert(1);
    }
    //使用自定义的悬浮文字提示代替原生的title属性,采用addEventListner进行事件绑定,不兼容IE 6 7 8
    var titleTools = {
        _init : function(time){
            var temp = time;
            time = parseInt(time);
            if(!isNaN(time)&&time>=0){
                this.timeout = time;
            }else{
                console.warn("param "+time+" is not a number or out of range! using default timeout setting");
            }
            //选中所有含有title属性的节点
            var eles = document.querySelectorAll('*[title]');
            for(var i=0;i<eles.length;i++){
                //隐藏原先的title属性,改用js进行控制
                if(eles[i].title){
                    eles[i].dataset.title = eles[i].title;
                
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月桦剑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值