Equating element offset inside jquery function

I am using a jquery tooltip plugin.
http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin

I have modified it so that I have a custom element with images to show for a tooltip as a bubble.

In order to get it to show directly above the text and for the elements inside my bubble to work correctly I need to get some offsets and heights and set them to be where the tooltip positions itself.

I can get my script to work perfectly with the element outside of jquery but with the plugin it doesn't work.

I have set an element inside the content of the bubble which is position at the bottom of the bubble. I get that elements offset from the top, its height and that becomes the overallHeight. Then I add some more to account for the header and footer of the bubble and that becomes the overallOffset.

I need to set the overallOffset to be the y offset for the tooltip itself.

Take a look at my script, I have my variables first and then the jquery function.

I can't get it to work.

Please help, very new to jQuery.
/*
 * 	Easy Tooltip 1.0 - jQuery plugin
 *	written by Alen Grakalic
 *	http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Modified by Dale Larsen to create a styled bubble for the tooltip for fabuso.com
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
    var grabInnerElement = document.getElementById('innerElementBottom');
	var elementTop = grabInnerElement.offsetTop;
	var elementHeight = grabInnerElement.offsetHeight;
	var overallHeight = elementTop + elementHeight;
	var overallOffset = elementTop + elementHeight + 46 + 50;
	document.getElementById('tooltipmiddleLeft').style.height=overallHeight;
	document.getElementById('tooltipmiddleRight').style.height=overallHeight;
	
(function($) {
 
	$.fn.easyTooltip = function(options){
 
		// default configuration properties
		var defaults = {
			xOffset: -100,
			yOffset: - overallOffset,
			tooltipId: "easyTooltip",
			clickRemove: false,
			content: "",
			useElement: ""
		};
 
		var options = $.extend(defaults, options);
		var content;
 
		this.each(function() {
			var title = $(this).attr("title");
			$(this).hover(function(e){
				content = (options.content != "") ? options.content : title;
				content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
				$(this).attr("title","");
				if (content != "" && content != undefined){
					$("body").append("<div id='"+ options.tooltipId +"'><div class='tooltipPopupTop'><div class='tooltiptopLeft'></div><div class='tooltiptopCenter'></div><div class='tooltiptopRight'></div></div><div class='tooltipPopupMiddle'><div id='tooltipmiddleLeft' class='tooltipmiddleLeft'></div><div id='tooltipmiddleCenter' class='tooltipmiddleCenter'>"+ content +"<span id='innerElementBottom'></span></div><div id='tooltipmiddleRight' class='tooltipmiddleRight'></div></div><div class='tooltipPopupBottom'><div class='tooltipbottomLeft'></div><div class='tooltipbottomCenter'></div><div class='tooltipbottomRight'></div></div></div>");
					$("#" + options.tooltipId)
						.css("position","absolute")
						.css("top",(e.pageY + options.yOffset) + "px")
						.css("left",(e.pageX + options.xOffset) + "px")
						.css("display","none")
						.fadeIn("fast")
				}
			},
			function(){
				$("#" + options.tooltipId).remove();
				$(this).attr("title",title);
			});
			$(this).mousemove(function(e){
				$("#" + options.tooltipId)
					.css("top",(e.pageY + options.yOffset) + "px")
					.css("left",(e.pageX + options.xOffset) + "px")
			});
			if(options.clickRemove){
				$(this).mousedown(function(e){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				});
			}
		});
 
	};
 
})(jQuery);

Open in new window

LVL 1
Shaye LarsenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ziffgoneCommented:
Can I see the HTML code for the "innerElementBottom" div? I'm assuming this is where your going to get the content for the tooltip?
0
ziffgoneCommented:
Is this kind of what you'd be looking for?

http://webmastereseller.com/test/image_tooltip.htm
0
Shaye LarsenAuthor Commented:
ziffgone,

Thanks for your response. innerElementBottom is an element with no content in it. It just sits inside of the element that receives the text in it. Since it is positioned to sit on the bottom whenever more text is entered it goes further from the top. That is why I am grabbing its offset from the top., that way I know how tall the content area is.

I already have everything I need to make this. I have the whole script working to get my parameters, heights and such, and I have the script working for my tooltip. I just need to combine the two so that I can get the y offset to properly place the location for the tooltip. You see, my height is variable based on the content and the width is fixed.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ziffgoneCommented:
Try this:


/*
 *      Easy Tooltip 1.0 - jQuery plugin
 *      written by Alen Grakalic
 *      http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *      Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *      Dual licensed under the MIT (MIT-LICENSE.txt)
 *      and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Modified by Dale Larsen to create a styled bubble for the tooltip for fabuso.com
 *
 *      Built for jQuery library
 *      http://jquery.com
 *
 */
        
(function($) {
 
        $.fn.easyTooltip = function(options){
                
                var overallHeight = $('#innerElementBottom').offset().top + $('#innerElementBottom').height();
                var overallOffset = overallHeight + 96;
 
                // default configuration properties
                var defaults = {
                        xOffset: -100,
                        yOffset: - overallOffset,
                        tooltipId: "easyTooltip",
                        clickRemove: false,
                        content: "",
                        useElement: ""
                };
 
                var options = $.extend(defaults, options);
                var content;
 
                this.each(function() {
                        var title = $(this).attr("title");
                        $(this).hover(function(e){
                                content = (options.content != "") ? options.content : title;
                                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                                $(this).attr("title","");
                                if (content != "" && content != undefined){
                                        $("body").append("<div id='"+ options.tooltipId +"'><div class='tooltipPopupTop'><div class='tooltiptopLeft'></div><div class='tooltiptopCenter'></div><div class='tooltiptopRight'></div></div><div class='tooltipPopupMiddle'><div id='tooltipmiddleLeft' class='tooltipmiddleLeft'></div><div id='tooltipmiddleCenter' class='tooltipmiddleCenter'>"+ content +"<span id='innerElementBottom'></span></div><div id='tooltipmiddleRight' class='tooltipmiddleRight'></div></div><div class='tooltipPopupBottom'><div class='tooltipbottomLeft'></div><div class='tooltipbottomCenter'></div><div class='tooltipbottomRight'></div></div></div>");
                                        $("#" + options.tooltipId)
                                                .css("position","absolute")
                                                .css("top",(e.pageY + options.yOffset) + "px")
                                                .css("left",(e.pageX + options.xOffset) + "px")
                                                .css("display","none")
                                                .fadeIn("fast");
                                        
                                        $('#tooltipmiddleLeft, #tooltipmiddleRight').css({height: overallHeight+'px'});    
                                }
                        },
                        function(){
                                $("#" + options.tooltipId).remove();
                                $(this).attr("title",title);
                        });
                        $(this).mousemove(function(e){
                                $("#" + options.tooltipId)
                                        .css("top",(e.pageY + options.yOffset) + "px")
                                        .css("left",(e.pageX + options.xOffset) + "px")
                        });
                        if(options.clickRemove){
                                $(this).mousedown(function(e){
                                        $("#" + options.tooltipId).remove();
                                        $(this).attr("title",title);
                                });
                        }
                });
 
        };
 
})(jQuery);

Open in new window

0
Shaye LarsenAuthor Commented:
Wow, thanks, that really helps to see some of the syntax that can be used here.

However, I still cannot get it to set the correct offset and height for the elements.

I made a few mods based on what you showed.

I removed the innerElementBottom and added an ID to the content area and am now getting its height to try and set the correct offset and height.

Here is what I have now:
/*
 * 	Easy Tooltip 1.0 - jQuery plugin
 *	written by Alen Grakalic
 *	http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Modified by Dale Larsen to create a styled bubble for the tooltip for fabuso.com
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
(function($) {
 
	$.fn.easyTooltip = function(options){
		
        var overallHeight = $('#tooltipmiddleCenter').height();
        var overallOffset = overallHeight + 96;
				
		// default configuration properties
		var defaults = {
			xOffset: 100,
			yOffset: overallOffset,
			tooltipId: "easyTooltip",
			clickRemove: false,
			content: "",
			useElement: ""
		};
 
		var options = $.extend(defaults, options);
		var content;
 
		this.each(function() {
			var title = $(this).attr("title");
			$(this).hover(function(e){
				content = (options.content != "") ? options.content : title;
				content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
				$(this).attr("title","");
				if (content != "" && content != undefined){
					$("body").append("<div id='"+ options.tooltipId +"'><div class='tooltipPopupTop'><div class='tooltiptopLeft'></div><div class='tooltiptopCenter'></div><div class='tooltiptopRight'></div></div><div class='tooltipPopupMiddle'><div class='tooltipmiddleLeft' style='height:" + overallHeight + "px'></div><div id='tooltipmiddleCenter' class='tooltipmiddleCenter'>"+ content +"</div><div class='tooltipmiddleRight' style='height:" + overallHeight + "px'></div></div><div class='tooltipPopupBottom'><div class='tooltipbottomLeft'></div><div class='tooltipbottomCenter'></div><div class='tooltipbottomRight'></div></div></div>");
					$("#" + options.tooltipId)
						.css("position","absolute")
						.css("top",(e.pageY - options.yOffset) + "px")
						.css("left",(e.pageX - options.xOffset) + "px")
						.css("display","none")
						.fadeIn("fast")
				}
			},
			function(){
				$("#" + options.tooltipId).remove();
				$(this).attr("title",title);
			});
			$(this).mousemove(function(e){
				$("#" + options.tooltipId)
					.css("top",(e.pageY - options.yOffset) + "px")
					.css("left",(e.pageX - options.xOffset) + "px")
			});
			if(options.clickRemove){
				$(this).mousedown(function(e){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				});
			}
		});
 
	};
 
})(jQuery);

Open in new window

0
Shaye LarsenAuthor Commented:
When I run a script to detect what the value of overallHeight is it returns "null".

So currently everything but that works.

overallOffset returns 96 so atleast that is there, obviously null + 96 = 96.

The offset is working, I can tell that it is indeed placing the yOffset for the tooltip at 96.

So that only thing left to figure out is how to get the height of the content area whose id is tooltipmiddleCenter.
0
ziffgoneCommented:
The problem is this >> var overallHeight = $('#tooltipmiddleCenter').height(); << can't be called untill the tooltipmiddleCenter div has been populated with content.

Can I see your call to the tooltip? Example:

      $('a#somediv').easyTooltip({
            content: "Some Content"
      });

I need to know where the content is coming from. You mentioned earlier that it's an empty div that you fill. When and how do you fill it? Give me some code examples.

Thanks...

0
Shaye LarsenAuthor Commented:
This is how I fill the content:
<script type="text/javascript">
$(document).ready(function(){
	$(".tooltipThis").easyTooltip({
		tooltipId: "easyTooltip2",
		content: 'This is a sample tooltip. Here is a bunch of text to fill the tooltip and stretch the surrounding divs. lorem ipsum yada yada.'
	});
});
</script>

Open in new window

0
ziffgoneCommented:
OK,

I moved the >> var overallHeight = $('#tooltipmiddleCenter').height(); << code to a point after the tooltipmiddleCenter div has been created and populated with the content. I then changed the CSS make-up to use the "overallOffset" instead of the "options.yOffset".

Hopefully it does the trick. Let me know.

Regards...


/*
 *      Easy Tooltip 1.0 - jQuery plugin
 *      written by Alen Grakalic
 *      http://cssglobe.com/post/4380/easy-tooltip--jquery-plugin
 *
 *      Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
 *      Dual licensed under the MIT (MIT-LICENSE.txt)
 *      and GPL (GPL-LICENSE.txt) licenses.
 *
 *  Modified by Dale Larsen to create a styled bubble for the tooltip for fabuso.com
 *
 *      Built for jQuery library
 *      http://jquery.com
 *
 */
 
(function($) {
 
        $.fn.easyTooltip = function(options){
                
 
                                
                // default configuration properties
                var defaults = {
                        xOffset: 100,
                        yOffset: 0,
                        tooltipId: "easyTooltip",
                        clickRemove: false,
                        content: "",
                        useElement: ""
                };
 
                var options = $.extend(defaults, options);
                var content;
 
                this.each(function() {
                        var title = $(this).attr("title");
                        $(this).hover(function(e){
                                content = (options.content != "") ? options.content : title;
                                content = (options.useElement != "") ? $("#" + options.useElement).html() : content;
                                $(this).attr("title","");
                                if (content != "" && content != undefined){
                                        $("body").append("<div id='"+ options.tooltipId +"'><div class='tooltipPopupTop'><div class='tooltiptopLeft'></div><div class='tooltiptopCenter'></div><div class='tooltiptopRight'></div></div><div class='tooltipPopupMiddle'><div class='tooltipmiddleLeft' style='height:" + overallHeight + "px'></div><div id='tooltipmiddleCenter' class='tooltipmiddleCenter'>"+ content +"</div><div class='tooltipmiddleRight' style='height:" + overallHeight + "px'></div></div><div class='tooltipPopupBottom'><div class='tooltipbottomLeft'></div><div class='tooltipbottomCenter'></div><div class='tooltipbottomRight'></div></div></div>");
                                        var overallHeight = $('#tooltipmiddleCenter').height();
                                        var overallOffset = overallHeight + 96;
                                        $("#" + options.tooltipId)
                                                .css("position","absolute")
                                                .css("top",(e.pageY - overallOffset) + "px")
                                                .css("left",(e.pageX - options.xOffset) + "px")
                                                .css("display","none")
                                                .fadeIn("fast");
                                }
                        },
                        function(){
                                $("#" + options.tooltipId).remove();
                                $(this).attr("title",title);
                        });
                        $(this).mousemove(function(e){
                                $("#" + options.tooltipId)
                                        .css("top",(e.pageY - options.yOffset) + "px")
                                        .css("left",(e.pageX - options.xOffset) + "px")
                        });
                        if(options.clickRemove){
                                $(this).mousedown(function(e){
                                        $("#" + options.tooltipId).remove();
                                        $(this).attr("title",title);
                                });
                        }
                });
 
        };
 
})(jQuery);

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Shaye LarsenAuthor Commented:
Wonderful thanks! I had to add the same variables again for the function below it to set the offset for onmousemove.

Everything works in firefox but it doesn't even show the tooltip now in Internet Explorer.

I have tried checking the syntax for common things that IE messes up but I couldn't identify any.
0
ziffgoneCommented:
Are you getting any errors in IE?

To make it easy to check, in IE, go into "Tools" >> "Internet Options" >> "Advanced" and then in the "Browsing" area check the box for "Display a notification about every script error".

Let me know if it's triggering an error.
0
Shaye LarsenAuthor Commented:
I don't have any errors in IE. I think it has to do with z-index??

It was behaving in the same manner on FF3 but after looking into it enough I found out that a plugin called jquery layout was messing up the z-index. SO I set the z-index really high and it fixed my problem. Now, if I remove that plugin it works in IE but my z-index isn't being respected, as z-index never seems to work in IE.

So, you have solved my problem. Thank you very much. I will open another question regarding the z-index issue if I can't resolve it myself.
0
Shaye LarsenAuthor Commented:
Thanks!

For all needing help with this, you will need to modify the mousemove function as well to get this working. Just add the appropriate variables for overallOffset inside the function for mousemove and replace the yoffset as done in the hove function.
0
ziffgoneCommented:
Z-Index only works Properly in IE if all your elements using z-index are positioned as one of these: absolute, relative or fixed.

It must also be noted that if the element that uses z-index is nested within another element, the containing element must also have a position relative or other in order for the z-index to work in IE.

Hope that helps...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.