jquery插件tooltipv顶部淡入淡出效果使用示例

jquery插件tooltipv顶部淡入淡出效果使用示例

 
   

 
内部使用  


复制代码 代码如下:


<head>
    <title></title>
    <link href="https://www.jb51.net/base.css" type="text/css" />
    <link href="https://www.jb51.net/jquery.tooltip.less" type="text/css">

<script src="https://www.jb51.net/less-1.4.2.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://www.jb51.net/jquery.tooltip.js" type="text/javascript"></script>
</head>
<body>
    <div></div>
    <button>info</button>
    <button>alert</button>
    <button>hide</button>
    <script language="javascript">
        $("#tooltipContainer").tooltip();  //初始化
        function tg1() {
            $("#tooltipContainer").tooltip("info", "据你的使用和需求的不同...");
        }
        function tg2() {
            $("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同...");
        }
        function tg3() {
            $("#tooltipContainer").tooltip("hide");
        }
    </script>
</body>

css

复制代码 代码如下:


.tooltip_info
{
    background:green;
    font-size:20px;
    border-radius: 10px;
}
.tooltip_alert
{
    background:yellow;
    font-size:20px;
    border-radius: 10px;
}

jquery.tooltip插件js代码

复制代码 代码如下:


(function ($) {
    var methods = {
        init: function (options) {
            return this.each(function () {

var $this = $(this);
                var settings = $this.data('tooltip');
                if (typeof (settings) == 'undefined') {
                    var defaults = {
                        infoCss: 'tooltip_info',
                        alertCss: 'tooltip_alert',
                        disappearTime: 1000
                    }
                    settings = $.extend({}, defaults, options);
                    $this.data('tooltip', settings);
                } else {
                    settings = $.extend({}, settings, options);
                    $this.data('tooltip', settings);
                }
                $tooltip = $("#tooltip");
                $tooltip.hide();
                if ($tooltip.length == 0) {
                    $tooltip = $("<div></div>");
                    $('body').prepend($tooltip);
                    $tooltip.hide();
                }
            })
        },
        info: function (options) {
            return this.each(function () {
                var $this = $(this);
                var setting = $this.data('tooltip');

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdwjpx.html