A recent calendar project included the requirement for a call out for images and anchor linking which would format the content with spacing, indentation, alignment, font styling, and position. This led me to create a simple yet fancy call out / tool tip to replace the default alternate (alt=””) or title (title=””) attributes for image and anchor tags. The amazing thing about the call out is that it works anywhere on the page and in just about any browser!
What is a call out?
In web design vernacular a call out is akin to a tooltip that you find on most graphical user interface (GUI) applications, which typically shows up when your mouse hovers over anchor links such as a title attribute, or when your mouse hovers over images with an alt or title attribute. An example of a typical tooltip in action is displayed in Figure A below from theTooltip Wiki. In fact, the terms “call out” and “tooltip” are really synonymous; I like to use the term call out since it more accurately reflects the qualities and history of graphic design balloons…think comic books.
Why create a fancy CSS styled call out?
For simple titles and alternate text for images or anchor linking, the default tooltip is fine, but what if you want to add in an image or more detailed textual content to your call out? The default tooltip does not give you much to choose from in the way of look and feel options. Have you ever seen a tooltip that looked like a run on sentence? Check out Figure B below; this is an example of an unformatted default tooltip with way too much information.
Another consideration for creating styled call outs includes browser display performance limitations for the default tooltip. As you can see in Figure B, the screen capture from Google Chrome exposes a limit to 19 lines of text, in IE 8 the tooltip got cut off after 9 lines of text.
I’ve tested the demonstration web page utilizing the call out code for this tutorial in the following browsers with great success:
- Firefox 11.0
- Google Chrome 23.0.1271.97 m
- Internet Explorer 8
- Opera 12.5
- Safari 5.1.5
The HTML Code
The call outs demonstrated in this piece function for anchor linking, images, or both combined within a