Simple tooltip plugin - onclick option doesn't work - jQuery

Question

I am trying to create a jquery plugin for a simple tooltip. The tooltip can have 2 options, position and trigger, position for top or bottom and trigger for hover or click. The hover part works but the click part isn't, and I can't figure why the click event won't trigger. I should mention that this is my first plugin, so I'm a rookie.

Here is the fiddle : http://jsfiddle.net/BjZyy/

The plugin looks like this:

        (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);

This is the 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>

This is the 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;}

an this is the plugin call:

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

Can someone please tell me what am I doing wrong ?

Answer 1

You're passing 2 callbacks instead of 1, you should write :

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


});