Apps

How to make CSS customized call outs

Ryan Boudreaux demonstrates more ways to jazz up call out boxes with special icons and messages.

This is a continuation of a recent post, "Create fancy-looking call outs with lightweight CSS," which was inspired by a recent calendar project that included a requirement for a call out for both 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 surprising thing about this one and the lightweight call out is that it works anywhere on the page and in just about any browser!

One note on using this type of CSS functionality is that it places limits on the semantic markup within the code and also presents challenges for accessibility, in particular for screen readers. Be mindful when applying these techniques in your code, and as always test your modifications before applying them into your production environment.

For this tutorial, I will review creating customized call outs based on content levels of significance and severity as well as a few for social networking. The custom call outs also utilize several image png file type icons, including the categories of critical, help, information, and warning, and social media icons such as Facebook and Twitter.

Browser acceptance

The demonstration web page utilizing the call out code for this tutorial has been tested in the following browsers with great success. The only exceptions are several CSS3 properties in IE8:

  • Firefox 11.0
  • Google Chrome 23.0.1271.97 m
  • Internet Explorer 8 (Border radius and box shadow are not supported)
  • Opera 12.5
  • Safari 5.1.5

The HTML code

The HTML is quite similar to the call outs in the previous tutorial with the exception that the tooltip portion has been eliminated and replaced with the custom icon images. The sample HTML code snippet for the "Critical" call out is displayed below:

<h3>Critical</h3>
<p>This is an example of a <a href="#" class="balloon">Critical
  <span class="critical">
    <img src="i/critical.png" />
      <strong>This is the customized "Critical Call Out"</strong><br />
      Place your "Critical" message here!
  </span></a> custom call out.</p>
The foundation HTML for each call out starts with the <a> anchor with a class equals "balloon", maintaining the call out balloon structure and styling as in the previous demonstration. The href="#" is a dummy link for demonstration purposes only. The <span> tag has a class equals "critical" which sets the background color and border for the call out balloon, followed by the "Critical" icon image, the call out textual content follows, and then the closing </span> is contained with the closing anchor tag </a> . The resulting call out is displayed in Figure A below as displayed in Chrome Version 23.0.1271.97 m.

Figure A

And the social network "Facebook" example is displayed below in Figure B as displayed in Chrome Version 23.0.1271.97 m.

Figure B

The remaining HTML for each instance in the demonstration replaces the span class with the respective custom call out style, i.e., class="help" for the "Help" call out, and so on.

The icon images

As noted above, each call out image icon is called immediately after the opening <span> tag. The six image file names in this demonstration are critical.png, facebook.png, help.png, information.png, twitter.png, and warning.png. They are displayed together in Figure C below.

Figure C

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 main functionality of the balloon styles were reviewed in the previous piece, so in this segment, I will highlight the custom styles. Each custom call out has its own background color stylized to represent the respective content and borders are all set to 1px solid with their respective colors. The CSS code snippets are displayed below. Note that the "help" and "information" styles maintain the same background color and border settings:

/** Customized Call Outs  **/
.normal {
       background: #fffAF0;
       border: 1px solid #DCA;
}
.critical {
       background: #e39595;
       border: 1px solid #a40a0a;
}
.help {
       background: #b3e2f2;
       border: 1px solid #133b95;
}
.information {
       background: #b3e2f2;
       border: 1px solid #133b95;
}
.warning {
       background: #f6f6b9;
       border: 1px solid #e0a50b;
}
.facebook {
       background: #b2bed6;
       border: 1px solid #001857;
}
.twitter {
       background: #a8e1f9;
       border: 1px solid #155875;
}

An additional set of styling was added for the balloon image which is set to a border of none and zero, with a margin of -22 top and -26 left, a padding of 5, text decoration set to none and text outline set to none.

.balloon img {
       border: none;
}
.balloon:hover img {
       border: 0;
       margin: -22px 0 0 -26px;
       float: left;
       padding: 5px;
       text-decoration: none;
       text-outline: none;
       border: none;
}

The balloon span styles were modified a bit to create the balloon call out to display below the link with the following CSS:

.balloon span {
    z-index: 99;
    display: none;
    padding: 5px 5px;
    margin-top: 42px;
    margin-left: -35px;
    position: absolute;
    min-width: 316px;
    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;
}

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 custom call out or tooltip. Just remember that if your websites have specific semantic, usability, and accessibility requirements, some of the functionality in this demonstration might not be available to some screen readers or useful for alternate text behaviors.

The remaining four demonstrated call out balloons are shown in Figure D below as displayed in Chrome Version 23.0.1271.97 m:

Figure D

You can download the index.html, styles.css, and associated images here.

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

1 comments
lehnerus2000
lehnerus2000

Thanks for these call-out/tooltip articles and examples. :)