Click here to Skip to main content
Click here to Skip to main content

Page Menu implements HTML 5: "abbr, base" elements

, 31 May 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
HTML 5, elements produce dynamic menu effects with contextual help

Introduction

HTML elements abbr and acronym could be used to provide the dynamic context-sensitive help, a.k.a. "pop-up" tooltips in a rather simple, intuitive way as shown in the following code snippet.
 
Note: element acronym considered obsolete and is not recommended for use in HTML5-compatible web design.
 

Demo

Working demo of context-sensitive help (tooltips) could be found at web application: ENGINERING CALCULATOR VOLTA-2011[^]. The menu at the top of calculator is implemented as a horizontal list with tooltip-enhanced buttons, utilizing the "abbr" tag to achieve the pop-up effect. On mouse hover, the tooltip will appear showing the text corresponding to the "title" attribute of the "abbr" tag. The same result could be achieved by using the "acronym" tag instead of "abbr".
 
Element base also included in HTML 5 simplifies the href coding. In addition to this, CSS list styling provides dynamic effect of circular marker added to the list item on mouse hover.

Listing 1. Sample Vertical Menu

<!DOCTYPE html>
<html>
  <head>
 
    <!-- novel element introduced in HTML 5-->
    <base href="http://www.webInfoCentral.com/" />
    <base target="_blank" />
 
    <style type="text/css">
 
       /* vertical menu list with dynamic circular marker: no image file used */
       ul.a {list-style-type:none;}
       ul.a li:hover {list-style-type:circle; cursor: pointer;}
 
       /* novel element introduced in CSS3 */
       abbr, acronym {cursor:help;}
 
    </style>
  </head>
 
  <body>
    <p>
      Vertical Menu List implemented with <abbr title="Vertical Menu List with dynamic circle marker appears on hover; demonstrates the use of abbr tag to provide context-sensitive help pop-up (aka tooltip)">abbr (move mouse over)</abbr>.
    </p>
 
    <!--VERTICAL MENU-->
    <ul class="a">
      <li><a href="math/fractions.aspx">Fraction Calculator</a></li>
      <li><a href="math/zeno.htm">Scientific Calculator ZENO</a></li>
      <li><a href="volta/volta.htm"><acronym title="Engineering Calculator VOLTA-2011 provides variety of scientific and engineering functions">Calculator VOLTA-2011</acronym></a></li>
      <li><a href="math/statistics.aspx">Statistics Calculator</a></li>
    </ul>
 
  </body>
</html>

References

  1. HTML abbr Tag[^]
  2. HTML acronym Tag[^]
  3. HTML base Tag[^]

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DrABELL
President Infosoft International Inc
United States United States
Dr. A. Bell has 20+ years of Software and Electrical Engineering experience: Win/Web veteran published 300+ articles and authored 37 inventions, currently focused on: Windows 7/8, HTML5, CSS3, jQuery, .NET, ASP.NET, WPF, C#, SQL, 'Big Data', AI, Speech Technology and Mobile apps. He participated in App Innovation Contest (AIC 2102/2013) with several winning submissions. Sample pubs follow:
  1. Edumatter M12: School Math Calculators and Equation Solvers (contest winner)
  2. Engineering Calculator VOLTA-2013 (contest winner)
  3. HTML5 Best Practices: Table formatting via CSS3
  4. Engineering Calculator VOLTA-814D
  5. SQL generates large data sequence
  6. Aggregate Product function extends SQL
  7. Watch Your Mouse!
  8. Top-100 Digital Cameras
  9. WebTV Project: Embedded YouTube Player (Goog #1 YouTube API for ASP.NET)
Dr. Bell is personally credited for 10+ Enterprise level projects w/total code base exceeding 250k lines.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 31 May 2011
Article Copyright 2011 by DrABELL
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid