修改html中title属性的默认样式

最新推荐文章于 2024-03-24 21:59:59 发布

原创最新推荐文章于 2024-03-24 21:59:59 发布 · 1.4w 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #jquery

html 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用JS、CSS和HTML结合的方法，实现自定义的Tooltip效果，通过鼠标悬停在元素上显示带有个性样式的提示信息。该方法包括修改title属性的默认样式，利用鼠标位置动态调整提示框的位置。

默认的html的title属性的样式是这样的。
在这里插入图片描述
通过编写JS函数来实现修改title属性的默认样式
效果如下：

HTML部分：

<span class="mytooltip" title="个性样式个性样式个性样式个性样式个性样式" >
    格式样式:
</span>

CSS部分：

 #mytitle {
        position: absolute;
        color: #ffffff;
        font-size: 14px;
        padding: 4px;
        background: rgba(40, 40, 40, 0.8);
        border-radius:5px;
        z-index:999;
    }

JS部分：

$(function () {
     
        var newtitle = '';
        $('span.mytooltip').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            if(newtitle != ''){
                $('body').append('<div id="mytitle" >' + newtitle + '</div>');
            }
            $('#mytitle').css({
                'left': (e.pageX + 'px'),
                'top': (e.pageY + 'px')
            }).show();
        }).mouseout(function () {
            this.title = newtitle;
            $('#mytitle').remove();
        }).mousemove(function (e) {
            $('#mytitle').css({
                'left': (e.pageX +10 + 'px'),
                'top': (e.pageY +10+ 'px')
            }).show();
        })
    });