[RandomlyKnighted]

Good morning, I'm working on this tooltip project which I had working at one time but reworked it to make it better. Unfortunately, I'm running into an issue with a variable being empty even though I'm setting it both in my HTML and my Javascript.

Here's my HTML:

<a href="#" title="Tooltip on top" data-position="top">Rem provident</a> alias molestiae. 

Here's my jQuery:

$.fn.tooltip = function(userOptions)
	{
		var defaultOptions =	{
									position: '',
									follow: true
								};

		options = $.extend(defaultOptions, userOptions);

		element = $(this);
		title = element.attr('title');
		element.on("mouseenter", element, _mouseEnter);
	}

	function build(title)
	{
		var markup  = '<div class="tooltip ' + options.position + '">';
		    markup += '<div class="tooltip-content">';
		    markup += '<p>' + title + '</p>';
		    markup += '<span class="tooltip-arrow"></span>';
		    markup += '</div>';
		    markup += '</div>';

		$('body').append(markup);

		var top, left;

		//
		tooltip = $('.tooltip');
		alert(options.position);
		if (options.position == "" || options.position == undefined || options.follow == true)
		{
			element.on("mousemove", element, _mouseMove);
		}

		else
		{
			if (tooltip.hasClass('top'))
			{
				top = $(this).offset().top - ($(this).height() * 2) - 10;
				left = $(this).offset().left;
			}

			else if (tooltip.hasClass('right'))
			{
				top = $(this).offset().top - ($(this).height() / 2);
				left = $(this).offset().left + toolTip.width(); 
			}
			
			else if (tooltip.hasClass('bottom'))
			{
				top = $(this).offset().top + $(this).height() + 10;
				left = $(this).offset().left;
			}

			else if (tooltip.hasClass('left'))
			{
				top = $(this).offset().top - ($(this).height() / 2);
				left = $(this).offset().left - (toolTip.width() * 1.5);
			}

			tooltip.css('top', top).css('left', left).show();
		}
	}	
		
	function _mouseEnter()
	{
		$(this).attr('title', '');

		build(title);
	}
		
	function _mouseMove(e)
	{
		tooltip.text(title);

		var position = $(this).data('position');
		var top = e.pageY + 75;
		var left = e.pageX + 10;

		tooltip.css('top', top).css('left', left).show();
	}
	
	function _mouseOut()
	{
		$(this).attr('title', title);
		$(this).hide();
	}

What happening is that position is always empty, therefore the mousemove function is being activated every single time. I'm getting the position from the data attribute so I'm not sure why it's empty. Any ideas?

[andrewsw]

You switched from tooltip to toolTip. JS is case-sensitive and there are probably errors in your browser's console.

[RandomlyKnighted]

Thanks I've fixed that, sadly that wasn't the cause of the value being empty. Oddly enough though I was getting any errors on toolTip.

[andrewsw]

How are you executing your code?

I have the error 'options is not defined' because it is defined in .tooltip() and not available to the build() function.

[RandomlyKnighted]

I'm just running it in my Firefox browser.

[andrewsw]

I mean how are you calling your code, causing it to execute.

However, as I mentioned, options is not available to your build function.

[RandomlyKnighted]

I have a script.js file with the following line that calls the code:

$('a').tooltip();

Right, I'm trying to figure out the best way to make that available to the build function now.

[ArtificialSoldier]

var position = $(this).data('position');

Your'e not doing anything with that variable once you get it, the variable is local to that function but you don't do anything with it before the function ends.

[RandomlyKnighted]

Yeah, that line was from the original version of the project, before I changed it to have my own mouseenter and mousemove functions. Actually, I just realized that in this function

$.fn.tooltip = function(userOptions)
	{
		var defaultOptions =	{
									position: '',
									follow: true
								};

		options = $.extend(defaultOptions, userOptions);

		element = $(this);
		title = element.attr('title');
		element.on("mouseenter", element, _mouseEnter);
	}

I'm getting the user defined options, but I don't have anything to account for when I use the data-position attribute instead of passing the position in via the function call.

[RandomlyKnighted]

Ok, so in order to account for when the user specifies the position of the tooltip via the data-attribute I added an if statement that check to see if the user has declared the position and if they have then it changes the follow to false. Here's what I did:

$.fn.tooltip = function(userOptions)
	{
		var defaultOptions =	{
									position: '',
									follow: true
								};

		options = $.extend(defaultOptions, userOptions);

		var position = $(this).data('position');
		if (position != undefined)
		{
			options.position = position;
			options.follow = false;
		}

		element = $(this);
		title = element.attr('title');
		element.on("mouseenter", element, _mouseEnter);
	}

I believe that puts me a step in the right direction. Something I hadn't noticed until just now is that no matter which tooltip I hover over the text in the tooltip is always the text of the very first anchor that I'm getting the title from.

[andrewsw]

I suspect that the essential problem is this:

tooltip = $('.tooltip');

When you examine a property such as tooltip.text() then jQuery will read this property from the first of these elements with class 'tooltip'. In event-code you need to reference the element that triggered the event, usually with $(this).

I also suspect, although I haven't investigated in detail, that you are using the same word 'tooltip' to reference different things.

[RandomlyKnighted]

I see what you mean about that. Unfortunately I can't use $(this) as it selects the element that I'm hovering over instead of the actual tooltip, because I'm adding the tooltips dynamically. Of course what I had might have worked if I was adding the tooltips to the page only when their elements are hovered over.