2
\$\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

asked Nov 29, 2011 at 15:05
\$\endgroup\$

1 Answer 1

3
\$\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.

answered Nov 30, 2011 at 11:04
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.