jq實現網頁個性title

<!DOCTYPE html>
<html content="text/html; charset=UTF-8">
<title>tooltip</title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#333333;
    padding:10px;
    color:#e5e6f0;
    display:none;
    z-index:30;
}
div{ width:100px; height:100px; background:#000; display:inline-block;}
a{ margin:10px; float:left;}
</style>
<a href="" class="tooltip">
<div title="No.1  第一行&lt;br /&gt;
第二行&lt;br /&gt;
第三行"></div>
</a>
<a href="" class="tooltip">
<div  title="No.2  第一行&lt;br /&gt;
第二行&lt;br /&gt;
第三行"></div>
</a>
<script type="text/javascript">

(function($){
    $.fn.tjtooltip = function(set) {
        var settings = $.extend({
            xoffset : 10,
            yoffset : 20,
            tooltip : 'tooltip'
        } , set);
        var tchild = null,
            tipo   = null,
            d_t    = '';
            WinW   = $(window).width(),
            leftPx = 0,
            tipo_width = 0;
        this.hover(function(e){
            tchild = $(this).children()[0];
            d_t = tchild.title;
            tchild.title = '';
            tipo = document.createElement('p');
            tipo.id = settings.tooltip;
            tipo.innerHTML = d_t;
            document.body.appendChild(tipo);
            tipo_width = tipo.offsetWidth;
            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?
                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );
            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";
            tipo.style.left= leftPx + "px";
            $("#"+settings.tooltip).fadeIn('fast');        
            },
            function(){
                tchild.title = d_t;            
                $("#"+settings.tooltip).remove();
            }
        );    
        this.mousemove(function(e){
            if(!tipo){return false;}
            leftPx = ( e.pageX + settings.yoffset + tipo_width ) > WinW ?
                     ( e.pageX - settings.yoffset - tipo_width ) : ( e.pageX + settings.yoffset );
            tipo.style.top = ( e.pageY - settings.xoffset ) + "px";
            tipo.style.left= leftPx + "px";
        });    
        return this;
    }
})(jQuery);

$('a.tooltip').tjtooltip();

</script>


</body></html>

相关阅读:
聚合物钽电容和普通钽电容的区别
Java命令：Jstack
计算并发用户数的五种方法
LoadRunner脚本优化-加密与解密
如何定位性能瓶颈
loadrunner配置多台负载机设置
nmon监控及简要分析
Web系统大规模并发——电商秒杀与抢购
大型网站的灵魂——性能
mycat实战之性能测试

原文地址：https://www.cnblogs.com/helin/p/3406113.html