Apps

Create fancy-looking call outs with lightweight CSS

Ryan Boudreaux demonstrates how to create more ornate call out boxes (or tooltips) by employing a little simple CSS. Here's an example you can use.

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 the Tooltip 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.

Figure A

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.

Figure B

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.

Browser acceptance

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 <div> element container. I tried using the aside <aside> and article <article> elements but these are not recognized by IE 8, so I opted to keep the <div> elements for now. If your customer utilizes any browser other than IE, then you can replace all references to "div" in the HTML and CSS code with "aside." I believe it would enhance the semantic markup for  call outs or tool tips since it is considered related, but detached information, to the anchor linking or image.

The basics

Each item that is associated with a call out must be contained within an anchor tag <a href="#" class="balloon"> </a> with a class equal to "balloon". For this demonstration the actual "href" is pointing to a dummy link, clicking on the link has no effect. I'll describe the CSS styling in the next section of the article. If the item is an image then it needs to be called next, and if the item is an anchor link then the <div> needs to be placed immediately after the opening anchor tag. Both basic examples of the HTML code are displayed below.

Anchor linking example

The amazing thing about the <a href="#" class="balloon">call out
   <div>
      <img class="arrow" src="i/arrow.gif" />
         <strong>This is the basic "Call Out"</strong><br />
         Add an unordered list if you wish!
         <ul>
           <li>a</li>
           <li>b</li>
           <li>c</li>
         </ul>
       Did you notice that the list style is set to none?
    </div></a> is that it works anywhere on the page and in just about any browser!

Immediately following the opening anchor tag is the text you want to be anchored and linked. Next is the opening <div>, and immediately following that is an image source call to the "arrow.gif" image with a class equals "arrow." Following that is the remaining content of the call out. Notice that all call out content is contained within the opening and closing <div> container. Following the closing <div> container is the closing anchor tag </a> and then any remaining textual content you might want to add, in this case, the remaining sentence.

The resulting output of the code above is displayed in Google Chrome Version 23.0.1271.97 m in Figure C below.

Figure C

Image example

<a href="#" class="balloon">
   <img src="i/screen_small.gif" />
   <div>
     <img class="arrow" src="i/arrow.gif" />
       <strong>CSS only "Call Out"</strong><br />
        No jQuery or JavaScript required!
       <img src="i/network_upgrade.gif" style="float: right;" />
   </div>
</a>

The call out for an image starts out the same as for an anchor reference linking, with the class equals "balloon" <a href="#" class="balloon">, however, the image to be connected to the call out must immediately follow after the opening anchor, as in the example <img src="i/screen_small.gif" />. Immediately after the image code is the opening and closing <div> with callout code content, followed by the closing anchor tag </a>.

The image example is displayed in displayed in Google Chrome Version 23.0.1271.97 m in Figure D below.

Figure D

The CSS

Now that we have the HTML, let's take a look at how the call outs are created and styled, and I will focus on the highlights of the code that make this functionality succeed.

The balloon

All calls to the CSS for the balloon class start with pseudo class of a.balloon in fact the first CSS is just that as displayed below with outline and text-decoration set to none, and color set to #00F.

a.balloon {
 outline:none;
 text-decoration:none;
 color: #00F; 
}

The next pseudo class is a.balloon strong which sets a line height of 30px, a font family of Candara, Tahoma, and Geneva Sans Serif, with a font size of 1.2em, and a color set to #F06.

a.balloon strong {
 line-height:30px;
 font-family: Candara, Tahoma, Geneva, sans-serif;
 font-size: 1.2em;
 font-weight: bold;
}

Next I've listed a few pseudo class selectors for hover and hover image with similar effects for text decoration and text outline, in addition to border and color settings.

a.balloon:hover {
 text-decoration:none;
 text-outline:none;
 color: #F06;
} 
a.balloon:hover img {
 text-decoration:none;
 text-outline:none;
 border: none;
}

Next, we have the anchor balloon image style, which sets the border to none and fixes an issue with IE displaying borders for images within an anchor. This is followed by the balloon div styling, setting a z-index of 10 to keep the balloon display above other elements on the page, display, margins, a minimum width setting of 275px, line height, border radius and box shadow settings with vendor prefixes for moz and webkit, and a font size and family setting as displayed below.

a.balloon img {
       border: none;
}
a.balloon div {
    z-index: 10;
    display: none;
    padding: 5px 5px;
    margin-top: -30px;
    margin-left: 10px;
    min-width: 275px;
    line-height: 16px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 6px 6px 10px #CCC;
    -webkit-box-shadow: 6px 6px 10px #CCC;
    box-shadow: 6px 6px 10px #CCC;
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    font-size: .8em;
}

Next are the balloon hover div which sets the display to inline with an absolute position, color, border, and background. The border hover list style, which sets the list style to none, is also displayed below.

a.balloon:hover div {
    display: inline;
    position: absolute;
    color: #111;
    border: 1px solid #DCA;
    background: #fffAF0;
}
a.balloon:hover li{
    list-style:none;
}

And finally the arrow class is set with a z index equals to 20 to keep it above the balloon div element with an absolute position, a top set to 30px, a border of 0, a left equals to -12px, and a color background set to transparent as displayed below.

.arrow{
    z-index: 20;
    position: absolute;
    top: 30px;
    border: 0;
    left: -12px;
    background-color: transparent;
}

This light weight call out which utilizes CSS styling only can be implemented on just about any web page and succeeds on just about any browser. Some of the specific CSS settings might need to be tweaked to fit your own application, but for the most part this is a great start to a simple yet effective and stylized call out or tooltip. I will delve into some more advanced options for custom call outs in a future segment.

The index.html, styles.css, and associated images are available for download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
Slayer_
Slayer_

I am cursed with clients on IE6, does this work?

mgombos
mgombos

Hi Ryan, thank you very much for another very nice piece of sotware. Unfortunately I see no chance for it to "work anywhere on the page". When the is right one can see only a part of the tooltip (try to insert enough text before ). Regards, Mircea Gombos

RJBoudreaux
RJBoudreaux

You may need to modify the CSS to fit certain circumstances such as being very close to the left or right edge of a page. Like I mentioned at the end of the article, "Some of the specific CSS settings might need to be tweaked to fit your own application...."

Editor's Picks