tipso.js jquery提示框悬浮提示插件-BFW插件库

tipso.js jquery提示框悬浮提示插件

tipso.js jquery提示框插件，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tipso。

Tipso 基于 jQuery，提供了很多配置，如：

显示动画持续时间
背景颜色
文本颜色
显示位置（上/右/下/左）
宽度
偏移
加载 ajax 内容
回调函数

使用方式：

第一步引入bfwone，加载依赖项jquery

第二步use插件

第三步配置

属性/方法	类型	默认值	说明
speed	整数	400	动画持续时间
background	字符串	‘#55b555’	背景颜色
color	字符串	‘#ffffff’	文本颜色
position	字符串	‘top’	显示位置
width	整数	200	宽度
delay	整数	200	延迟
offsetX	整数	0	水平偏移
offsetY	整数	0	垂直偏移
content	字符串	null	内容
ajaxContentUrl	字符串	null	异步加载内容
useTitle	布尔值	true	使用 title 属性值作为内容
onBeforeShow	函数	null	执行前的回调函数
onShow	函数	null	显示前的回调函数
onHide	函数	null	显示后的回调函数

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["tipso.min", "tipso.min"], function() {
                $('#tip1').tipso({
                    useTitle: false
                });

                // 2
                $('#tip2').tipso({
                    useTitle: false,
                    position: 'left'
                });

                // 3
                $('#tip3').tipso({
                    useTitle: false,
                    background: 'tomato'
                });

                // 4
                $('#tip4').tipso();

                // 5
                $('#tip5').tipso({
                    useTitle: false
                });
                $('#btn5').on({
                    click: function(e) {
                        if ($(this).text() == '显示') {
                            $(this).text('隐藏');
                            $('#tip5').tipso('show');
                        } else {
                            $(this).text('显示');
                            $('#tip5').tipso('hide');
                        }
                        e.preventDefault();
                    }
                });

                // 6
                $('#tip6').tipso({
                    useTitle: false
                });
                $('#btn6').on('click', function() {
                    var $val = $(this).prev().val();
                    if ($val) {
                        $('#tip6').tipso('update', 'content', $val);
                    }
                });

                // 7
                $('#tip7').tipso({
                    useTitle: false
                });

                // 8
                $('#tip8').tipso({
                    useTitle: false,
                    onBeforeShow: function() {
                        $('#status').html('beforeShow');
                    },
                    onShow: function() {
                        $('#status').html('show');
                    },
                    onHide: function() {
                        $('#status').html('hide');
                    }
                });
            });
        });
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-family: "Microsoft Yahei";
        }
        h1 {
            padding: 45px 0;
            font: 32px "Microsoft Yahei";
            text-align: center;
        }
        .bfwcont {
            width: 500px;
            margin: 30px auto 0;
            border: 1px solid #ddd;
        }
        .bfwcont h2 {
            padding: 10px;
            font-size: 16px;
            font-weight: 400;
            background-color: #f5f5f5;
        }
        .bfwcont .inner {
            padding: 60px;
            text-align: center;
        }
        .bfwcont p {
            margin-top: 10px;
            font-size: 14px;
        }
        .bfwcont input {
            margin-right: 10px;
            padding: 5px;
            border: 1px solid #ddd;
            font-family: "Microsoft Yahei";
        }
    </style>
</head>
<body>
    <h1>轻巧的jQuery提示框插件Tipso演示</h1>

    <div class="bfwcont">
        <h2>1、默认</h2>
        <div class="inner">
            <span id="tip1" data-tipso="bfw.wiki">Tipso</span>
        </div>
    </div>

    <div class="bfwcont">
        <h2>2、左边显示</h2>
        <div class="inner">
            <span id="tip2" data-tipso="bfw.wiki">Tipso</span>
        </div>
    </div>

    <div class="bfwcont">
        <h2>3、背景颜色</h2>
        <div class="inner">
            <span id="tip3" data-tipso="bfw.wiki">Tipso</span>
        </div>
    </div>

    <div class="bfwcont">
        <h2>4、使用title属性</h2>
        <div class="inner">
            <span id="tip4" title="内容来自 title 属性">Tipso</span>
        </div>
    </div>

    <div class="bfwcont">
        <h2>5、单击显示/隐藏</h2>
        <div class="inner">
            <span id="tip5" data-tipso="bfwcont">Tipso</span>
            <p>
                <a id="btn5" href="javascript:">显示</a>
            </p>
        </div>
    </div>

    <div class="bfwcont">
        <h2>6、更新内容</h2>
        <div class="inner">
            <span id="tip6" data-tipso="bfw.wiki">Tipso</span>
            <p>
                <input type="text"><a id="btn6" href="javascript:">更新</a>
            </p>
        </div>
    </div>

    <div class="bfwcont">
        <h2>7、在图片上使用</h2>
        <div class="inner">
            <img id="tip7" style="height:100px;" src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="" data-tipso="bfw.wiki">
        </div>
    </div>

    <div class="bfwcont">
        <h2>8、回调函数</h2>
        <div class="inner">
            <span id="tip8" data-tipso="bfw.wiki">Tipso</span>
            <p>
                状态：<em id="status"></em>
            </p>
        </div>
    </div>


</body>
</html>