<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ---- http://www.blogohblog.com/pure-css-tooltips/ ---- */
/* ---- -------------------------------------------- ----    'This is the basic simple one'
The property display:none to the span tag inside the hyperlink. 
This will make the text inside the span tag invisible. 
Now when you hover your mouse, we make it appear again by giving the property display:block to the span tag on hover.
These tooltips can also be integrated into a wordpress theme easily. Just copy the CSS into your style.css file...
&lt;a class="tooltip" href="#" title=""&gt;&lt;span&gt;This is a tooltip example!&lt;/span&gt;Click on this link&lt;/a&gt;
------- -------------------------------------------- ---- */
.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
   display:block;
   position:absolute;
   width:200px;
   top:25px;
   left:20px;
   background-color:#FCFBDC;
   border:1px solid #333333;
   padding:5px;
   font-size:11px;
   color:#333333;
   text-decoration:none;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}


/* ---- ------------------------------------------------------ -#1- */
/* ---- http://css.flepstudio.org/en/css-tips/css-tooltip.html ---- */
/* ---- &lt;a href="#nogo" class="css_tooltip1"&gt;link&lt;span&gt;css tooltip1&lt;/span&gt;&lt;/a&gt; ---- */
a.css_tooltip1 {
   position:relative;        /* necessary to position next the span in an absolute way */
   text-decoration:none;     /* remove the underlining from the links                 */
}
a.css_tooltip1:hover {
   background-color:#FFFFFF; /* a background color is needed for Internet Explorer 6 */
}
a.css_tooltip1 span {
   display:none;             /* hide the span element in opening */
}
a.css_tooltip1:hover span {
   display:block;            /* the span element are converted from inline to block element*/
   position:absolute;        /* absolute positioning in rapport to their parent link      */
   z-index:20;               /* needed to position the element span above other links    */
   top:1.4em;
   left:2em;
   /* -- style of css tooltip -- */
   width:200px;
   border:1px solid #0CF;
   background-color:#C4AB8D;
   color:blue;
   padding:5px;
} 

/* ---- ------------------------------------------------------ -#2- */
/* ---- &lt;a href="#nogo" class="css_tooltip2"&gt;link&lt;span&gt;&lt;img src="myImg.jpg" alt="" /&gt;&lt;b&gt;css tooltip2&lt;/b&gt;&lt;/span&gt;&lt;/a&gt; ---- */
a.css_tooltip2 {
   position:relative;
   text-decoration:none;
}
a.css_tooltip2:hover {
   background-color:transparent;
}
a.css_tooltip2 span {
   display: none;
}
a.css_tooltip2:hover span {
   display:block;
   position:absolute;
   z-index:20;
   top:1.3em;
   left:1em;
   /* width:203px; */
   padding:5px;
   border:2px solid #666666;
   background-color:#000000;
   color:#FFFFFF;
}
a.css_tooltip2 span img {
   border:1px solid #FFFFFF;
}
a.css_tooltip2 span b {
   display:block;
   font-weight:normal;
}
/* ---- ------------------------------------------------------ ---- */




/* ---- http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm ---- */
/* ---- This works with: 'tooltip-js.js' -see:-tooltip-test.html-- ---- */
/* ---- near Top of the .js file is where you define your tooltips ---- */
/* - &lt;a rel="imgtip[0]" href="http://www.dynamicdrive.com"&gt;Link 1&lt;/a&gt; - */
.ddimgtooltip {
   box-shadow: 3px 3px 5px #818181; /* -- shadow for CSS3 capable browsers. -- */
   -webkit-box-shadow: 3px 3px 5px #818181;
   -moz-box-shadow: 3px 3px 5px #818181;
   display:none;
   position:absolute;
   border:1px solid black;
   background:white;
   color: black;
   z-index:2000;
   padding: 4px;
}

/* ---- See also:  http://trentrichardson.com/examples/csstooltips/  ----  http://sixrevisions.com/css/css-only-tooltips/ ---- */</pre></body></html>