YAPTT: Yet Another Popover Tool Tip

jmrker · 11-02-2012, 08:37 PM

Here is a small tool tip popover code example.

Uses normal tooltip code and a special, colorful, tooltip code.
Finally there is a sticky popover tooltip where links, tags and images are allowed.

Click inside the third tooltip (not on link unless desired to hyperlink) to see the tip closed.
Could add a special 'X' or [close] tag for clarification purposes

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Popover Tooltip</title>
<style type="text/css">
 @media print { body { font-size: 16pt } }
 @media screen { body { font-size: 18px } }
 @media screen, print { body { line-height: 1.2 } }

 .ttip { display:none; position:absolute; z-index:10;
         background-color:#ffff00; border:3px solid blue; }
</style>

<script type="text/javascript">
function $_(IDS) { return document.getElementById(IDS); }

// From: http://txt.binnyva.com/2007/06/find-elements-position-using-javascript/
function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft,curtop];
}

function tip(IDS,flag,info) {
  if (flag) {
    var tarr = findPos(info);
    $_(IDS).style.display = 'block';
    $_(IDS).style.left = (tarr[0]+10)+'px';
    $_(IDS).style.top = (tarr[1]+25)+'px';
  } else {
    $_(IDS).style.display = 'none';
  }
}
</script>

</head>
<body bgcolor="#C0DFFD">
 <a href="#" onclick="return false" title="Normal ToolTip">Normal ToolTip</a><br>

 <a href="http://www.nova.edu/~rumsey/Sced/ScedF2012.html"
  onmouseover="tip('Sced',true,this)" onmouseout="tip('Sced',false)">Schedule</a> 
 <a href="#" onclick="return false" onmouseover="tip('ForumList',true,this)"> Forums </a>
 
 <div id="Sced" class="ttip">Current Schedule Display</div>
 <div id="ForumList" class="ttip" style="width:450px" onclick="tip('ForumList',false)">
  <a href="http://www.codingforums.com">Coding Forums</a> 
  <img src="http://www.codingforums.com/img/logo.gif"><p>
  <a href="http://www.webdeveloper.com">Web Developer</a> 
  <img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif"><p>
  <a href="http://www.dreamincode.com">Dream-In-Code</a>
  <img src="http://cdn.dreamincode.net/home/images/logo_2012.gif?v=3"><p>
 </div>
 
<noscript>
<h1>Your browser does not have JavaScript enabled.  You'll be missing a lot!</h1>
</noscript>

</body>
</html>