« »

Use this JavaScript to provide tooltips, F.A.Qs, and other information. The tip is shown when the mouse rolls over the title. You can use any valid HTML element, even links.

Label: rollover, hide, show, rollover image, hide button, tooltip, F.A.Q, tip, HTML element

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
<!--
dt {
  font-weight:bold;
}
-->
</style>

Copy All x2

<script type="text/javascript">
<!--
// Created by: Fang :: http://www.webdeveloper.com/forum/showpost.php?p=820426&postcount=2

function showHide(parent) {
  var aDD=parent.getElementsByTagName('dd');
  for(var dd=0; dd<aDD.length; dd++) {
    aDD[dd].style.display=(aDD[dd].style.display=='none')? 'block' : 'none';
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
var aDT=document.getElementsByTagName('dt');
for(var i=0; i<aDT.length; i++) {
    aDT[i].onmouseover=aDT[i].onmouseout=Function ('showHide(this.parentNode)');
    showHide(aDT[i].parentNode);
    }
});
//-->
</script>

Copy All x2

<dl>
  <dt><a href="http://www.w3.org/">The World Wide Web Consortium</a></dt>
    <dd style="display: none;">Develops interoperable technologies (<em>specifications</em>, <em>guidelines</em>, <em>software</em>, and <em>tools</em>) to lead the Web to its full potential.</dd>
</dl>
<dl>
  <dt><a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript">Unobtrusive JavaScript</a></dt>
    <dd style="display: none;">The separation of JavaScript functionality (the "behavior layer") from a Web page's structure/content and presentation layers</dd>
</dl>
<dl>
  <dt>Unrelated stuff (no link)</dt>
    <dd style="display: none;">Ma
quande lingues coalesce, li grammatica del resultant lingue es plu
simplic e regulari quam ti del coalescent lingues. Li nov lingua franca
va esser plu simplic e regulari quam li existent Europan lingues. It va
esser tam simplic quam Occidental.</dd>
</dl>