jQuery.mousetip工具提示 jQuery 插件

联合创作 · 2023-10-02 17:03

jQuery.mousetip 是一个轻量级 jQuery 插件,能够创建随着鼠标移动或鼠标位置不同的提示项。显示图片信息,如下图所示:

代码示例:

HTML

<div>Content<span class="tip">Mousetip 1</span></div>
<div>Content<span class="tip">Mousetip 2</span></div>
<div>Content<span class="tip">Mousetip 3</span></div>

jQuery

$(function() {    // Default
    $('div').mousetip('.tip');    // Custom Position
    $('div').mousetip('.tip', 20, 30);

});

CSS

span.tip {

    /* Required */
    position: absolute;
    z-index: 2;
    display: none;

    /* Optional */
    font-size: 15px;
    max-width: 150px;
    height: auto;
    padding: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px #666;
    background: #FD0;
}
浏览 2
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报