# Creating Custom Tool Tips - J Query

Problem
From time to time, a graphical element or interface aspect may need further clarification, but because of restraints on space (or for the sake of aesthetics), a designer might not want to take up precious screen real estate by adding explanatory text. In such a case, there is a need to provide a bit of guidance to the user, who would need it initially but whose need would diminish as familiarity with the interface grew. In such cases, a tool tip makes for an ideal solution. However, HTML leaves us with scarce resources to create a tool tip, and often the title="..." attribute does not cut it.
Tool tips can be a good solution for user interface clarification, especially if tied to some sort of dismissible user preference (i.e., “Don’t show me this again”). However, dynamic tool tips have often been abused, most notably on blogs, where every single element on a page with a title="..." attribute causes a tool tip to appear when the mouse passes over it. Such cases should be avoided, because if everything is treated asa special case via a tool tip, then the importance is diminished, and in reality nothing on the page is emphasized. It is the equivalent of shouting every single word in a sentence. Just as with any web project, the context of the content should dictate the approach, not vice versa.

Solution

To solve this problem, we can use jQuery to get the mouse position within our area of interest on the page and then dynamically place a <div>element offset from the point of origin, which could contain instructions, additional information (in the case of e-commerce), or just about anything the developer needs to appear. This would be done by creating a dynamically generated <div>before the close of the </body>tag,allowing it to have a higher z-index than the rest of the page, which would look like
Figure (A tool tip generated with jQuery). Additionally, just to be sure the tool tip takes precedence, it is explicitly given an extremely high z-index of 9999.

Tool tip—HTML code

Tool tip—jQuery code

Discussion

It is worth mentioning that $('.tooltip') is not the most performant way to retrieve elements. For the sake of this demo, all tags on the page are being parsed, which is the equivalent of document.getElementsByTagName('*'). Depending on the size of the document,and depending on the browser, this can be quite slow. So, when actually employing this code, be sure to specify which tags you are looking for. For example, you would use$('a.tooltip, span.tooltip') instead of just $('.tooltip'). While more modern browsers will map such class selectors to getElementsByClassName or querySelectorAll(if available), older browsers have to first iterate through tag names and then determine whether the relevant class is present. Assuming that one or more elements exist that match class="tooltip", we append the dynamic markup at the end of the page, right before the close of the body. It does not yet appear anywhere visibly, because in the CSS file we have applied display: none tothe #tooltip_outerID. Next, we create empty variables called$tt_titleand \$tt_alt. These will be used totemporarily store the title and alt (if it exists) attributes of our matched class="tooltip" elements. The astute reader might wonder, “Aren’t we just interested in the title attribute? Why worry about alt?” Good question. We store the alt attribute in addition to the title, just in case class="tooltip" is used on an image. Internet Explorer causes its own tool tip to appear showing the alt contents, and we don’t want that.
The rest of the code deals with class="tooltip" elements. When one such element is hovered over with the mouse, we store the contents of the title and (possibly) alt attributes and then zero them out by setting each one equal to an empty text string.
This way, there is no browser default tool tip interfering with our custom one. The contents of the title attribute are copied to #tooltip_inner, and then the
#tooltip_outer is shown.
Likewise, when the mouse leaves the target element, we want to undo what happened when it was it first entered. The #tooltip is hidden, the #tooltip_innercontent is set to an empty string, and the title and alt attributes are restored to their original values.
Lastly, the .mouse move() method monitors mouse movement once it has entered the boundaries of a class="tooltip" element. The tool tip is offset relative to the mouse position, appearing to the right side of the cursor; that is, unless the tool tip is dangerously close to extending beyond the width of the browser. In such a case, a horizontal scroll bar would appear, and we do not want that. To solve this snafu, we have a bit of logic that flips the tool tip to the left side of the cursor. The same is true vertically. If the tool tip is too far at the bottom of a page, it will flip itself to be above the mouse cursor.