Attaching the tip container to the mouse


show more Attaching the tip container to the mouse provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Tooltip with jQuery show less
please wait ...

Attaching the tip container to the mouse

Now we need to work on actually moving the tooltip container to match where the user's mouse is. So we're going to come inside of the mousemove area here, let's add a few Returns, and we want to start by declaring a variable. We're going to say var, space, toolTipWidth, we're going to set that equal to and we want to figure out how wide the actual tooltip container is. So dollar sign, parentheses, two tick marks for string literal, #tooltip_container, outside of the parentheses we're going to type .outerWidth();.

Next line, second variable, toolTipHeight = $(), tick marks for string literal, pound sign ('#tooltip_container').outerHeight. Now we've set a maximum-width of 200 pixels but the height can actually vary based on the HTML data that we're pulling in here or the text data that we're pulling in up here, and so depending on how much content goes in there, the actual size of that tooltip container is going to change.

So we want to declare t...

Attaching the tip container to the mouse
Video duration: 4m 2s 54m 23s Intermediate

Viewers:

Attaching the tip container to the mouse provides you with in-depth training on Developer. Taught by Chris Converse as part of the Create a Tooltip with jQuery

Subjects:
Developer Web
Software:
jQuery
Author:
please wait ...