File: /home/design11/hotbeveragenutrition.com/hover_tip.html
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="css/ex.css" type="text/css">
<style type="text/css">
div#tipDiv {
padding:4px;
color:#000; font-size:11px; line-height:1.2;
background-color:#E1E5F1; border:1px solid #667295;
width:250px;
}
</style>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<script src="js/dw_tooltip_aux.js" type="text/javascript"></script>
<script type="text/javascript">
dw_Tooltip.defaultProps = {
hoverable: true
}
dw_Tooltip.content_vars = {
L1: '<a href="index.html">Clickable links</a> can be placed in the hover-tip, since the tooltip will wait for the viewer to hover over it.',
L2: 'You could place the content for the hover tip in <a href="html_els.html">HTML elements</a> in the page. All it takes to declare the tooltips hoverable is a property setting. See <a href="http://www.dyn-web.com/code/tooltips/documentation.php">documentation online.</a>'
}
</script>
</head>
<body>
<h1>Hoverable Tooltips</h1>
<p>This example demonstrates how clickable links can be placed in the hover-tip, since the tooltip will wait for the viewer to hover over it.</p>
<p><a href="index.html" class="showTip L1">link 1</a></p>
<p><a href="index.html" class="showTip L2">link 2</a></p>
<p>Sometimes when you want to put links and other rich HTML and a tooltip it may make more sense to use <a href="html_els.html">HTML elements that exist in the page</a>.</p>
<p>Back to <a href="index.html">index</a></p>
</body>
</html>