CSS, Better Tooltips - Display Tooltips on hover and more reliably

It doesn't do so well on the top of a window as the tootip can go off the page. Needs more work...

The Code for: "CSS, Better Tooltips [Display Tooltips on hover and more reliably].htm"

This is the example, a shortcut was installed to this code (or click here to invoke) :

<!-- $Header:   C:/DBAREIS/Projects.PVCS/Win32/ScriptingTipsAndTricks/Shortcut-Test-Execute-Pause-Stub.cmd.pvcs   1.1   11 Jul 2014 19:31:06   USER "Dennis"  $ -->
<!--
  1) BASED ON     : http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/
  2) CSS SELECTORS: http://www.w3schools.com/css/css_selectors.asp
  3) CSS EXAMPLES : http://www.w3schools.com/css/css_examples.asp
-->
<html>
<head>
<style>
    /*--- Basic tooltip function (no arrow on tooltip) ---*/
    .TT
    {
        display: inline;
        position: relative;
    }
    .TT:hover:after
    {
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(TT);   /*--- Get content from value "TT" ---*/
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 220px;
    }

    /*--- Add an arrow -----------------------*/
    .TT:hover:before
    {
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }
</style>
</head>

<body>
<!-- blah blah... -->
<p><p>This example is highly based on code from
"<a target='_blank' href='http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/'>http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/</a>",
please see it for more information, it does a good job of explaining things.
<b><p>It is known to work in IE11 and Chrome version 37 but not in IE8</b>.


<!-- The actual definition of some text with a tooltip -->
<p><a class='TT' TT='This is a tooltip. It stays up forever while you hover allowing you to read it'>[Hovering over here will display a tooltip]</a>


</body>
</html>