简单的工具提示插件 - onclick选项不起作用 - jQuery

时间:2013-10-24 08:51:56

标签: javascript jquery css tooltip

我正在尝试为简单的工具提示创建一个jquery插件。工具提示可以有2个选项,位置触发器顶部底部的位置以及的触发器悬停点击。悬停部分可以工作但点击部分不起作用,我无法理解为什么点击事件不会触发。我应该提一下,这是我的第一个插件,所以我是新手。

这是小提琴:http://jsfiddle.net/BjZyy/

该插件如下所示:

        (function ($) {
            $.fn.tooltip = function(options){
                var settings = $.extend({
                    position : 'top',
                    trigger  : 'hover'
                }, options);
                var tooltipEl = $(".tooltip-list .tooltip-element");
                return tooltipEl.each(function (){
                    if(settings.trigger == 'hover') {
                        $(".tooltip").hover( function(){
                            $(".tooltip-text", $(this).parent()).show();
                            if(settings.position == 'top') {
                                $(".tooltip-text").addClass("top-position");  
                            }
                            if(settings.position == 'bottom') {
                                $(".tooltip-text").addClass("bottom-position");  
                            }
                        },
                        function () {
                            $(".tooltip-text").hide();
                        });
                    }
                    if (settings.trigger == 'click') {
                        $(".tooltip").click( function(){
                            alert("asdasdasd");
                            $(".tooltip-text", $(this).parent()).show();
                            if(settings.position == 'top') {
                                $(".tooltip-text").addClass("top-position");  
                            }
                            if(settings.position == 'bottom') {
                                $(".tooltip-text").addClass("bottom-position");  
                            }
                        },
                        function () {
                            $(".tooltip-text").hide();
                        });
                    }
                });
            };
        })(jQuery);

这是HTML:

        <div class="tooltip-list">
            <div class="tooltip-element">
                <a class="tooltip" href="#">Lorem Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Lorem Lorem</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
            <div class="tooltip-element">
                <a class="tooltip" href="#">Ipsum Ipsum</a>
                <div class="tooltip-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
            </div>
        </div>

这是CSS:

    .tooltip {
        position: relative;
    }
    .tooltip-element{
        position: relative;
        padding: 20px;
    }
    .tooltip-text {
        padding: 15px;
        background-color: #fff;
        border: 1px solid black;
        position: absolute;
        display: none;
        width: 40%;
        z-index: 9;
    }
    .top-position{ top: -115px;}
    .bottom-position{ top: 40px;}

这是插件调用:

    $(document).ready(function($) {
        $('.tooltip-element a').tooltip({position : 'top', trigger : 'hover'});
    });

有人可以告诉我我做错了什么吗?

1 个答案:

答案 0 :(得分:1)

你要传递2个回调而不是1,你应该写:

$(".tooltip").click(function(){
    // check if opened or closed
    // then do your stuff ...


});