Js+css Implement a bubble tip box _javascript Tips

Share a bubble tip box, the practice of the techniques are: (1) JS response to the mouse event; (2) make a pure CSS triangle.

Effect this way:

This is HTML:

Copy Code code as follows:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Bubbles dialog Box </title>
<script src= "Mybubbletooltip.js" ></script>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>
<style type= "Text/css" >
h1{
font-size:60px;
margin-top:0;
Font-family:arial, Sans-serif;
text-shadow:2px 0px 10px #292929;
letter-spacing:0px;
Text-decoration:none;
Color: #DDDDDD;
}
div#left{
border:1px solid #CCCCCC;
width:200px;
height:300px;
Background-color: #EEEEEE;
Float:left;
margin:0 0 0 20px;
}
div#content{
border:1px solid #CCCCCC;
width:600px;
height:300px;
Background-color: #EEEEEE;
Float:left;
margin:0px 20px;
}
div#editor{
border:1px solid #CCCCCC;
Float:left;
width:300px;
height:300px;
}
div#test{
border:2px solid #cccccc;
width:400px;
height:400px;
}
. bubble_tooltip_common{
Z-index:1;
Color: #333333;
width:150px;
Position:absolute;
Display:none;
border:1px solid #AAAAAA;
box-shadow:0px 0px 10px #AAAAAA;
border-radius:5px;
padding:5px 10px;
Background-color: #FEFAB8;
}

Copy Code code as follows:

/* Tip point to the left side of the triangle, rim * *
. triright{
Z-index:2;
border:10px solid #AAAAAA;
Border-color:transparent #AAAAAA Transparent transparent;
width:0;
height:0;
Position:absolute;
left:-20px;
top:5px;
}

Copy Code code as follows:

<pre class=html name= "code" >/* the tip points to the left triangle, inside, */</pre>.trirightinner{Z-index:3; border:8px solid #FEFAB8; Border-color:transparent #FEFAB8 Transparent Transparent;<span style= "font-family:arial, Helvetica, Sans-serif" The >/* color should be consistent with the background-color of the cue box */</span><br>
width:0; height:0; Position:absolute; left:-16px; TOP:7PX;} </style></div> <div id= "Editor" contenteditable> [click to edit.] </div></body><PRE></PRE>
<P></P>
<p><span style= "Font-family:microsoft Yahei; Font-size:18px "><STRONG> This is JavaScript code:</strong></span></p>
<P></P>
<pre class=javascript name= "code" >function Showtooltip (e,text) {
if (document.all) e = event;
var obj = document.getElementById (' Bubble_tooltip ');
var obj2 = document.getElementById (' bubble_tooltip_content ');
obj2.innerhtml = text;
var st = Math.max (document.body.scrolltop,document.documentelement.scrolltop);
if (Navigator.userAgent.toLowerCase (). IndexOf (' Safari ') >=0) st=0;
var LeftPos = E.clientx + 20; The ClientX event property returns the horizontal coordinates of the mouse pointer relative to the browser page (or client area) when the event is triggered
if (leftpos<0) LeftPos = 0;
Obj.style.left = LeftPos + ' px ';
Obj.style.top = e.clienty + st + ' px ';
Obj.style.display = ' block ';
FadeIn (obj,5,100);
}

function Hidetooltip ()
{
var obj = document.getElementById (' Bubble_tooltip ');
Obj.style.display = ' None ';
Fadeout (obj,5,0);
}

Set element transparency, transparency value by IE rules, i.e. 0~100
function setopacity (EV, v) {
Ev.filters? Ev.style.filter = ' alpha (opacity= ' + V + ') ': ev.style.opacity = v/100;
}

Fade in effect (with fade to specified transparency)
function FadeIn (elem, speed, opacity) {
/*
* Parameter Description
* elem==> elements to fade in
* Speed==> fade in speed, positive integer (optional)
* Opacity==> Fade to specified transparency, 0~100 (optional)
*/
Speed = Speed | | 20;
Opacity = Opacity | | 100;
Displays the element with an element value of 0 transparency (invisible)
Elem.style.display = ' block ';
SetOpacity (elem, 0);
Initialization transparency Change value is 0
var val = 0;
The loop increments the transparent value by 2, which is the fade effect
(function () {
SetOpacity (Elem, Val);
val = 5;
If (Val <= opacity) {
SetTimeout (Arguments.callee, speed)
}
})();
}

Fade effect (including fade to specified transparency)
function fadeout (elem, speed, opacity) {
/*
* Parameter Description
* elem==> elements to fade in
* Speed==> fade in speed, positive integer (optional)
* Opacity==> Fade to specified transparency, 0~100 (optional)
*/
Speed = Speed | | 20;
Opacity = Opacity | | 0;
Initialization transparency Change value is 0
var val = 100;
The loop decrements the transparent value by 5, which is the fade effect
(function () {
SetOpacity (Elem, Val);
Val-= 5;
If (Val >= opacity) {
SetTimeout (Arguments.callee, speed);
}else if (Val < 0) {
Hide elements After element transparency is 0
Elem.style.display = ' None ';
}
})();
}</pre><br>
<BR>
<P></P>
<PRE></PRE>