Example 5: HTML Tooltips

In the fifth example, we really start to get versatile. We are going to demonstrate how the tooltip content can be html markup. When I say any, I really mean just that, any, including an embedded iframe! For the left link we just make a tooltip with and html list. For the second, we can browse google!*

Tooltip with html list | Tooltip as embedded window

* Because the target is a link again, we have to do funny things to avoid the default. When you register the onclick event, you have to trick the browser into thinking that it was not clicked so that it does not go to the link index.html. To circumvent this, we wrap our event call in return makeFalse().

Note: Notice how the webpage in the iframe does not have to load the second time the tooltip is opened. This is because we have specified for the 'onClose' setting to be 'hide.' If we change 'onClose' to 'destroy,' then the webpage will have to load again when we open the tip a second time. This can be useful when the content in the webpage needs to be cleared after working with it, for instance if we wanted to clear the search we made each time and start fresh.

«Example 4
Example 6»