Full version: jsB@nk » Link » Tooltip » X Tooltips
URL: https://www.javascriptbank.com/tooltips-x-tooltips.html
The code displays tooltip that float from left to right when visitors move mouse over link.
Full version: jsB@nk » Link » Tooltip » X Tooltips
URL: https://www.javascriptbank.com/tooltips-x-tooltips.html
<style type="text/css">#xTooltip { position:absolute; visibility:hidden;}.tip1 { color:#666; border-bottom:1px dashed #ccc;}.tip2 { color:#66f; border-bottom:1px dashed #ccf;}.tip3 {}.xtip1 { position:absolute; visibility:hidden; overflow:hidden; color:#000; background:#ccc; border:1px solid #666; font-size:10px; margin:0; padding:1px; width:180px; height:14px;}.xtip2 { position:absolute; visibility:hidden; overflow:hidden; color:#008; background:#ccf; border:1px solid #008; font-size:10px; margin:0; padding:1px; width:180px; height:14px;}.xtip3 { position:absolute; visibility:hidden; overflow:hidden; color:#800; background:#fcc; border:1px solid #800; font-size:10px; margin:0; padding:1px; width:180px; height:14px;}</style><link rel="stylesheet" type="text/css" href="s1.css"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript" src="xlib.js"></script><script type="text/javascript">xInclude('../x_core.js', '../x_event.js', '../x_dom.js', '../x_slide.js');window.onload = function() { xInitTooltips(3);}function xInitTooltips(n) { var i, j, tips; for (i = 1; i <= n; ++i) { tips = xGetElementsByClassName('tip' + i); for (j = 0; j < tips.length; ++j) { tips[j].isTip = true; tips[j].onmouseover = xttOnMouseover; } } xAddEventListener(document, 'mousemove', xttOnMousemove, false);}function xttOnMouseover(e) { var tt = xGetElementById('xTooltip'); tt.className = 'x' + this.className; tt.innerHTML = this.getAttribute('title'); xMoveTo(tt, -200, xPageY(this) - xHeight(tt) - 2); xShow(tt); xSlideTo(tt, xPageX(this), xPageY(this) - xHeight(tt) - 2, 250);}function xttOnMousemove(e) { var evnt = new xEvent(e); var ele = evnt.target; if (!ele || !ele.isTip) { xHide('xTooltip'); }}</script><script type="text/javascript" src="x_core.js"></script><script type="text/javascript" src="x_event.js"></script><script type="text/javascript" src="x_dom.js"></script><script type="text/javascript" src="x_slide.js"></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><span class="tip1" title="But I must explain">Sed ut perspiciatis</span>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui do<a class="tip3" href="http://lipsum.com/" title="Read about Lorem Ipsum at lipsum.com">lorem ipsum</a><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/link/tooltips/s1.csshttp://javascriptbank.com/javascript/link/tooltips/x_core.jshttp://javascriptbank.com/javascript/link/tooltips/x_event.jshttp://javascriptbank.com/javascript/link/tooltips/x_dom.jshttp://javascriptbank.com/javascript/link/tooltips/x_slide.jshttp://javascriptbank.com/javascript/link/tooltips/xlib.js