Js+css Implement a bubble tip box _javascript Tips

Source: Internet
Author: User
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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.