tooltip和title美化网站提示教程

admin

教程简介

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

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也是

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

注意:这个功能需要引入jquery才能实现。
tooltip和title美化网站提示教程

版权协议须知!

本篇文章来源于 晓超云博客 ,如本文章侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意

779 0 2019-05-02

微语程序"个人信息显示插件"

这款插件个人感觉也十分的辣鸡,胜在娱乐一下也好。前端css...

阅读全文
Veno File Manager v3.5.4 - PHP在线存储&分享源码

源码简介早期发布之后,然后看到汉化版,起名为极简网盘,好像...

阅读全文
esoTalk 中文优化版

esoTalk 可能大家不太熟悉,但她的下一代 Flaru...

阅读全文
剑鱼论坛(JianYuLunTan)开源轻论坛 v1.4.0

剑鱼论坛系统是一款轻论坛系统,由鲶鱼CMS官方开发并发布,...

阅读全文
选择表情
  • 默认
  • 护眼
  • 夜晚
  • Serif
  • Sans