View Full Version : YAPTT: Yet Another Popover Tool Tip

11-02-2012, 09:37 PM
Here is a small tool tip popover code example. :D

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<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; }

<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';

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

<h1>Your browser does not have JavaScript enabled. You'll be missing a lot!</h1>