Tooltips with Images

This example of dyn-web's DHTML Tooltips demonstrates and describes how the tooltip can display images or images with text, including a title or caption. The 2008 version of the code includes several functions providing various formatting and layout options. The code supports implementation of custom functions for formatting that you might choose to write and also supports positioning options.

As noted in the documentation it is quite simple to include images in the tooltip. Generally, when displaying images it is desirable to have more control over aspects of the tooltip such as its width and layout. Hover over the dash-underlined text below to see the capabilities of the code demonstrated.

  • The tooltip width can be adjusted according to the width of images.
  • Display image over text
  • Display text over image
  • Display image and text side by side
  • Include a caption with the image and text
  • Display in the center of the window as 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 want to display images in the tooltip you can pass the image tag in a string as demonstrated in the documentation. When you want to include both images and text you will generally find it much easier to use the special formatting functions provided with the code. For example, you could set up the code to display image over text using the formatting function wrapImageOverText as follows:

dw_Tooltip.defaultProps = {
    wrapFn: dw_Tooltip.wrapImageOverText
}

dw_Tooltip.content_vars = {
    // for link with class="showTip L1":
    L1: {
        img: 'images/dw-btn.gif',
        txt: 'dyn-web button',
        w: 100 // width of tooltip
    },
    L2: {
        img: 'images/dot-com-btn.gif',
        txt: 'dyn-web.com button',
        w: 184
    }
}

The settings above come from the image/text example in the download file. Rather than having to include the image tag and any other rich HTML you'd like to include in a string you can specify them separately in the img and txt properties for each link. You can further control their appearance using specifications in the style sheet.

You can view the JavaScript file for this example and the file that includes the formatting functions. Divs with classes are included in the formatting functions, allowing you to set up specifications such as padding, alignment font-size, etc.

The code is designed to support large images in the tooltip. The code will continue to adjust the position while the image is loading. You can specify the width of the image or the tooltip for each link. Positioning options provided give you considerable control over how and where the tooltip will display, making best use of the available space within the window.

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