Page Elements' Content Displayed in Tooltips

This example demonstrates and describes how you can use dyn-web's Tooltip code to display HTML elements that exist in your page as tooltips. Generally the content of tooltips is not available for those with JavaScript disabled or incapable browsers or for search engines, but with this approach it is fully accessible.

Attach a class of tipContent and browsers capable of performing the tooltip will not display that content in the page but it will be available for incapable browsers and search engines. To demonstrate: a link to documentation displaying a hoverable tooltip, and a sticky tooltip.

Instructions

The documentation contains general instructions for implementing the code, such as the script tags to be included, where and how to specify styles for the tooltip, etc. When you wish the content for your tooltips to be obtained from HTML elements that exist in the page, you specify the content_source as follows:

dw_Tooltip.defaultProps = {
    content_source: 'class_id'
}

The value of class_id refers to the fact that the id of the element to display exists in the class name of the tooltip link after showTip. An example link:

<a href="." class="showTip menu1">link</a>

The class showTip signifies the link is to display a tooltip, menu1 is the id of the element whose content is to be displayed onmouseover of the link.

Hiding the Tip Content Elements from Capable Browsers

Early in the page you include a call to a function that checks browser capabilities, and for those with the necessary requirements, writes a style rule to hide elements with a class of tipContent:

dw_Tooltip.writeStyleRule();

Other Properties with HTML Elements for Tip Content

The ability to display page elements in tooltips can be combined with other features of the code, for example, making use of its hoverable or sticky properties and alternate positioning functions. In this case, the html_id property in content_vars entries is used to specify the element's id.

View the JavaScript file for this demo to observe. Part two of the documentation describes.

Styles for tipContent

The tipContent class as mentioned above tells the code that the content is to be displayed in the tooltip. Actually, the innerHTML of that element is copied into the tooltip. Although you could apply styles using the tipContent class that would have an effect for browsers incapable of displaying the code, those styles would not have an effect when the content is displayed in a tooltip.

Styles to be applied to those elements inside the tooltip would need to have their selectors set up differently, perhaps applied to a wrapper around that content or applied using div#tipDiv[1] in the selector. For example, if the element you want to display has an unordered list you could specify styles for display in the tooltip as follows:

div#tipDiv ul, div#tipDiv li {
    margin:0; padding:0; list-style:none;
    }

More Information

See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains numerous examples to simplify the process of implementation for you. See the list of examples in the right column to see other features demonstrated.

See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.

Back to top

• Home
• Site Map
• Code
  • Scrolling Div’s
  • Tooltips
  • Rotate Images
  • FontSizer
• Tutorials
  • Scripting Iframes
  • Combining Scripts
  • JavaScript Errors
  • Object Literals
• Business
  • Terms of Use
  • Licensing Information
  • Price List/Order Form
  • Donations
  • Policies
• Contact