JS CSS implements a bubble prompt box_javascript skills

Share a bubble prompt box. The techniques practiced are: (1) JS responds to mouse events; (2) Pure CSS makes triangles.

The effect is like this:

This is the html:

Copy the code The code is as follows :

< title>Bubble dialog

Bubble dialog

When the mouse is placed here, a bubble dialog box will pop up.

sharejs.com

[Click to edit. ]

This is the JavaScript code:

< ;/P>

function showToolTip(e,text){ <br>if(document.all)e = event; <br>var obj = document.getElementById ('bubble_tooltip'); <br>var obj2 = document.getElementById('bubble_tooltip_content'); <br>obj2.innerHTML = text; <br>var st = Math.max(document.body.scrollTop,document.documentElement. scrollTop); <br>if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; <br>var leftPos = e.clientX 20; //clientX event attribute returns when the event The horizontal coordinate of the mouse pointer relative to the browser page (or client area) when triggered <br>if(leftPos<0)leftPos = 0; <BR>obj.style.left = leftPos 'px'; <BR>obj. style.top = e.clientY st 'px'; <BR>obj.style.display = 'block'; <BR>fadeIn(obj,5,100); <BR>} <br><br>function hideToolTip() <BR>{ <BR>var obj = document.getElementById('bubble_tooltip'); <BR>//obj.style.display = 'none'; <BR>fadeOut(obj,5,0); <BR>} <br><br>//Set element transparency, the transparency value is calculated according to IE rules, that is, 0~100 <BR>function SetOpacity(ev, v){ <BR>ev.filters ? ev.style.filter = 'alpha(opacity =' v ')' : ev.style.opacity = v / 100; <BR>} <br><br>//Fade in effect (including fade in to specified transparency) <BR>function fadeIn(elem, speed, opacity) { <BR>/* <BR>* Parameter description<BR>* elem==> Elements that need to be faded in <br>* speed==>gt; Fade-in speed, positive integer (optional) <br>* opacity== >Fade to the specified transparency, 0~100 (optional) <br>*/ <br>speed = speed || 20; <br>opacity = opacity || 100; <br>//Display the element and The element value is 0 transparency (invisible) <br>elem.style.display = 'block'; <br>SetOpacity(elem, 0); <br>//Initialization transparency change value is 0 <br>var val = 0 ; <br>//Loop to increment the transparency value by 2, that is, the fade-in effect <br>(function(){ <br>SetOpacity(elem, val); <br>val = 5; <br>if (val < = opacity) { <BR>setTimeout(arguments.callee, speed) <BR>} <BR>})(); <BR>} <br><br>//Fade out effect (including fade out to specified transparency) <BR>function fadeOut(elem, speed, opacity){ <BR>/* <BR>* Parameter description<BR>* elem==>Elements that need to be faded in<br>* speed==>Fade in speed, positive integer ( Optional) <br>* opacity==> Fade to the specified transparency, 0~100 (optional) <br>*/ <br>speed = speed || 20; <br>opacity = opacity || 0; <br>//Initialize the transparency change value to 0 <br>var val = 100; <br>//Loop to decrease the transparency value by 5, that is, the fade-out effect <br>(function(){ <br>SetOpacity(elem, val); <br>val -= 5; <br>if (val >= opacity) { <br>setTimeout(arguments.callee, speed); <br>}else if (val < 0) { <br>//Hide the element after the element transparency is 0 <br>elem.style.display = 'none'; <br>} <br>})(); <br>}