1
\$\begingroup\$

I tried creating a quick tooltip plugin using the jquery and jquery ui position. Is the way I have used the enclosure are right and is the use of position right since in ff it seem to have some memory problem..it remembers the previous position when I refresh the page after the first time. below is the code

This need the latest jquery & jquery ui

  $.fn.tooltip = function(options) {
            var defaults = {
                my : "left center",
                at : "right top",
                collision : "none",
                offset : "0 0"
            }

            var options = $.extend(defaults, options);

            return this.each(function() {
                var $this = $(this);
                var tip = $("<span class='tooltip'>" + $this.attr('tooltip') + "</span>");
                tip.css({
                    width : options.width
                });
                $this.after(tip);
                tip.position({
                    my : options.my,
                    at : options.at,
                    of : $this,
                    collision : options.collision,
                    offset : options.offset
                });

                $this.add(tip).hover(function() {
                    var timeoutId = $this.data('timeoutId');
                    if(timeoutId) {
                        clearTimeout(timeoutId);
                    }
                    tip.fadeIn("slow");

                }, function() {
                    var timeoutId = setTimeout(function() {
                        tip.fadeOut("slow");
                    }, 650);
                    $this.data('timeoutId', timeoutId);
                });
            });
        };
        $(function() {
            $('#input1').tooltip();
            $('#input2').tooltip();
        });

css style

        .tooltip {
            display: none;
            position: absolute;
            background-color: #ffaa5e;/* #F5F5B5; */
            border: 1px solid #DECA7E;
            color: #303030;
            font-family: sans-serif;
            font-size: 12px;
            line-height: 18px;
            padding: 10px 13px;
            position: absolute;
            text-align: center;
            top: 0;
            left: 0;
            z-index: 3;
        }

html code to test this

http://jsfiddle.net/HE8QN/

thanks

\$\endgroup\$
2
\$\begingroup\$

Try this type of closure

    $this.add(tip).hover(function() {
        return function() {
            var timeoutId = $this.data('timeoutId');
            if(timeoutId) {
                clearTimeout(timeoutId);
            }
            tip.fadeIn("slow");
        };

    }(), function() {
        return function() {
            var timeoutId = setTimeout(function() {
                tip.fadeOut("slow");
            }, 650);
            $this.data('timeoutId', timeoutId);
        };
    }());

Just dont forget to tell if it solves the problem. Good luck.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.