jQuery qtip小试

最新推荐文章于 2025-08-04 11:09:13 发布

原创最新推荐文章于 2025-08-04 11:09:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #button #function #class

Web前端设计专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用jQuery qTip插件制作美观的浮动提示层。通过引入jQuery及qTip插件，设置内容、样式及显示方式等参数，实现了一个包含简介与详细描述的动态浮动层效果。

由于要做一些稍微好看点儿的浮动层，就想起了jQuery qtip插件。小试了下：

首先，引入2个js文件：

    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.qtip.js" type="text/javascript"></script>

然后，小测如下：

        $(function () {
            $('a').qtip(
            {
                content: {
                    title: {
                        text: '简介',
                        button: '<a class="tips">关闭</a>'
                    },
                    text: '<div><dl>苏州小巷：</dl><dl><dd>古典</dd><dd>婉约</dd><dd>雅致</dd></dl></div>'
                },
                position: {
                    corner: {
                        target: 'bottomLeft',
                        tooltip: 'topRight'
                    }
                },
                style: {
                    width: {
                        min: 200
                    },
                    tip: 'topRight',
                    name: 'cream'
                },
                show: {
                    solo: true
                },
                hide: false
            });
        });

贴张效果图：