Is it possible to get one of those yellow, pop-up Tool-Tip thingies when a user hovers over a <span> or a <div> ?
I have some financial and statistical data that is displayed, and I think it would be helpful if I can show how the calculation was done using a Tool-Tip thingy.
For example, if you hover <span>(65%)</span> you might see…
ROI = Gains from Investment - Cost of Investment) / Cost of Investment
As always, I try to write code which is compliant, and yet for stuff like this it, may mean bending some rules!
<span title="ROI = (Gains from Investment - Cost of Investment) / Cost of Investment">(65%)</span>
Or this way, which displays a dotted line under 65%:
<span><abbr title="ROI = (Gains from Investment - Cost of Investment) / Cost of Investment">(65%)</abbr></span>
Validates in HTML4 and 5, and I should therefore think it should also validate in XHTML. However, this standard method doesn’t work on touch screens. For tooltips that work on both, you need Javascript, such is in this code (live demo):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Light-weight Tooltip by FC</title>
<style>
html {
font-size: 62.5%;
}
body {
font: normal 1.3em Verdana;
background-color: white; /* just for the JSBin demo */
}
h2 {
text-align: center;
margin-bottom: 2em;
}
span.tool {
position: relative;
display: inline-block;
border-bottom: 1px dashed black;
}
span.tool:hover {
cursor: help;
}
span.tip {
position: absolute;
bottom: 20px;
left: 0px;
display: block;
width: auto;
white-space: nowrap;
font-size: .9em;
border: 0px solid black; /* change as desired */
border-radius: 6px;
padding: 1px 5px;
background: #eee;
background: linear-gradient(top, #eee, #ccc);
background: -moz-linear-gradient(top, #eee, #ccc);
background: -o-linear-gradient(top, #eee, #ccc);
background: -webkit-linear-gradient(top, #eee, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background: -ms-linear-gradient(top, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eeeeee,EndColorStr=#cccccc);
zoom: 1;
visibility: hidden;
}
</style>
</head>
<body>
<h2>Light-weight Tooltip by FC</h2>
<p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>
<p>
It is part of the
<span class="tool">UN
<span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
</span>,
which was established in 1945.
</p>
<hr>
<p>Explanation and 'minds':</p>
<ul>
<li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li>
<li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li>
<li>In the current code the width of the tips is set to <i>auto</i>, and controlled with <br>s in the tip text. Change to fixed width as desired.</li>
<li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li>
<li>The HTML is valid and the code works in IE8 as well.</li>
<li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li>
</ul>
<script>
var tools = document.querySelectorAll('.tool'); // mind the dot
var nrOfTools = tools.length;
for (var i=0; i<nrOfTools; i++) {
if ('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch)) {
tools[i].onclick = function() {
if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
this.children[0].style.visibility = 'visible';
else
this.children[0].style.visibility = 'hidden';
}
}
else {
tools[i].onmouseover = function() {
this.children[0].style.visibility = 'visible';
}
tools[i].onmouseout = function() {
this.children[0].style.visibility = 'hidden';
}
}
}
</script>
</body>
</html>
