jq實現網頁個性title

最新推荐文章于 2025-06-05 13:34:30 发布

ljihe

最新推荐文章于 2025-06-05 13:34:30 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML+CSS Javascript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/ljihe/article/details/52121808

HTML+CSS 同时被 2 个专栏收录

23 篇文章

订阅专栏

Javascript

22 篇文章

订阅专栏

本文介绍了一个基于jQuery实现的自定义Tooltip插件，该插件可以为网页元素添加浮动提示框，支持自定义偏移量及提示框ID。文章通过具体示例展示了如何使用此插件，并提供了完整的HTML、CSS及JavaScript代码。

<!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>