» » » » » Creat CSS3 Cool Tooltip without jquery

0 , , , 6/02/2012
Today i will show you that with only CSS how to create beautiful tooltips in a post.
The CSS :
/******** [ tooltip ] ********/

.devtooltip {
 outline:none;
 position:relative;
 text-decoration:none !important;
}
span.devtooltip {
 display:inline-block; /* IE trick */
}
.devtooltip:hover .tooltip {
 opacity:1;
 visibility:visible;
}
.devtooltip .tooltip {
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 border-style:solid;
 border-width:1px;
 border-bottom-width:2px;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 1px rgba(255, 255, 255, 1) inset;
 cursor:default;
 font-family:Arial, Helvetica, sans-serif;
 padding:18px;
 position:absolute;
 font-size:12px;
 opacity:0;
 text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4);
 visibility:hidden;
 white-space:nowrap;
 width:auto !important;
 z-index:999999;
}
.devtooltip .tooltip:before,
.devtooltip .tooltip:after {
 content:'';
 height:0;
 position:absolute;
 width:0;
 z-index:1;
}
.devtooltip .tooltip .title {
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 box-shadow:0 1px 0 rgba(255, 255, 255, 0.4);
 padding:0 4px 4px;
 margin:0 -4px 6px -4px;
 display:block;
 font-size:14px;
 font-weight:bold;
 letter-spacing:-0.1px;
 position:relative;
 width:100%;
}
/**** [ positioning ] ****/

/** position center **/
/* center */
.devtooltip .tooltip.center {
 left:-119px;
 margin-left:50%;
 right:auto;
}
.devtooltip .tooltip.center:before,
.devtooltip .tooltip.center:after {
 left:50%;
 margin-left:-12px;
}

/* center-left */
.devtooltip .tooltip.center-left,
.devtooltip .tooltip.center-left {
 left:-33px;
 margin-left:50%;
 right:auto;
}
.devtooltip .tooltip.center-left:before,
.devtooltip .tooltip.center-left:after { left:20px; }

/* center-right */
.devtooltip .tooltip.center-right,
.devtooltip:hover .tooltip.center-right {
 left:auto;
 margin-right:50%;
 right:-33px;
}
.devtooltip .tooltip.center-right:before,
.devtooltip .tooltip.center-right:after { right:20px; }

/** position left **/
/* left */
.devtooltip .tooltip.left,
.devtooltip:hover .tooltip.left {
 left:-22px;
 right:auto;
}
.devtooltip .tooltip.left:before,
.devtooltip .tooltip.left:after { left:20px; }

/* left-center */
.devtooltip .tooltip.left-center,
.devtooltip:hover .tooltip.left-center {
 left:-108px;
 right:auto;
}
.devtooltip .tooltip.left-center:before,
.devtooltip .tooltip.left-center:after {
 left:50%;
 margin-left:-12px;
}

/* left-right */
.devtooltip .tooltip.left-right,
.devtooltip:hover .tooltip.left-right {
 left:auto;
 right:-44px;
 margin-right:100%;
}
.devtooltip .tooltip.left-right:before,
.devtooltip .tooltip.left-right:after { right:20px; }

/** positon right **/
/* right */
.devtooltip .tooltip.right,
.devtooltip:hover .tooltip.right {
 left:auto;
 right:-22px;
}
.devtooltip .tooltip.right:before,
.devtooltip .tooltip.right:after { right:20px; }

/* right-left */
.devtooltip .tooltip.right-left,
.devtooltip:hover .tooltip.right-left {
 left:-44px;
 margin-left:100%;
 right:auto;
}
.devtooltip .tooltip.right-left:before,
.devtooltip .tooltip.right-left:after { left:20px; }

/* right-center */
.devtooltip .tooltip.right-center {
 left:auto;
 right:-109px;
}
.devtooltip .tooltip.right-center:before,
.devtooltip .tooltip.right-center:after {
 left:50%;
 margin-left:-12px;
}

/* position top */
.devtooltip .tooltip.top {
 bottom:100%;
 margin-bottom:12px;
 top:auto;
}
.devtooltip .tooltip.top:after {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 bottom:-9px;
}
.devtooltip .tooltip.top:before {
 border-right:12px solid transparent;
 border-left:12px solid transparent;
 bottom:-12px;
}

/* position bottom */
.devtooltip .tooltip.bottom {
 bottom:auto;
 margin-top:14px;
 top:100%;
}
.devtooltip .tooltip.bottom:after {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 top:-11px;
}
.devtooltip .tooltip.bottom:before {
 border-left:12px solid transparent;
 border-right:12px solid transparent;
 top:-13px;
}

/**** [ animations ] ****/

/* fadein - fadeout */
.devtooltip .tooltip.fade {
 -moz-transition-property:opacity, visibility;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out;
 transition-property:opacity, visibility;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.fade {
 -moz-transition-property:opacity;
 -moz-transition-duration:0.4s;
 -moz-transition-timing-function:ease-in-out;
 -o-transition-property:opacity;
 -o-transition-duration:0.4s;
 -o-transition-timing-function:ease-in-out;
 -webkit-transition-property:opacity;
 -webkit-transition-duration:0.4s;
 -webkit-transition-timing-function:ease-in-out;
 transition-property:opacity;
 transition-duration:0.4s;
 transition-timing-function:ease-in-out;
}

/* slide-left */
.devtooltip .tooltip.center.slide-left { left:-99px; }
.devtooltip:hover .tooltip.center.slide-left { left:-119px; }
.devtooltip .tooltip.center-left.slide-left { left:-13px; }
.devtooltip:hover .tooltip.center-left.slide-left { left:-33px; }
.devtooltip .tooltip.center-right.slide-left { right:-53px; }
.devtooltip:hover .tooltip.center-right.slide-left { right:-33px; }
.devtooltip .tooltip.left.slide-left { left:-2px; }
.devtooltip:hover .tooltip.left.slide-left { left:-22px; }
.devtooltip .tooltip.left-center.slide-left { left:-88px; }
.devtooltip:hover .tooltip.left-center.slide-left { left:-108px; }
.devtooltip .tooltip.left-right.slide-left { right:-64px; }
.devtooltip:hover .tooltip.left-right.slide-left { right:-44px; }
.devtooltip .tooltip.right.slide-left { right:-42px; }
.devtooltip:hover .tooltip.right.slide-left { right:-22px; }
.devtooltip .tooltip.right-left.slide-left { left:-24px; }
.devtooltip:hover .tooltip.right-left.slide-left { left:-44px; }
.devtooltip .tooltip.right-center.slide-left { right:-129px }
.devtooltip:hover .tooltip.right-center.slide-left { right:-109px }

/* slide-right */
.devtooltip .tooltip.center.slide-right { left:-139px; }
.devtooltip:hover .tooltip.center.slide-right { left:-119px; }
.devtooltip .tooltip.center-left.slide-right { left:-53px; }
.devtooltip:hover .tooltip.center-left.slide-right { left:-33px; }
.devtooltip .tooltip.center-right.slide-right { right:-13px; }
.devtooltip:hover .tooltip.center-right.slide-right { right:-33px; }
.devtooltip .tooltip.left.slide-right { left:-42px; }
.devtooltip:hover .tooltip.left.slide-right { left:-22px; }
.devtooltip .tooltip.left-center.slide-right { left:-128px; }
.devtooltip:hover .tooltip.left-center.slide-right { left:-108px; }
.devtooltip .tooltip.left-right.slide-right { right:-24px; }
.devtooltip:hover .tooltip.left-right.slide-right { right:-44px; }
.devtooltip .tooltip.right.slide-right { right:-2px; }
.devtooltip:hover .tooltip.right.slide-right { right:-22px; }
.devtooltip .tooltip.right-left.slide-right { left:-64px; }
.devtooltip:hover .tooltip.right-left.slide-right { left:-44px; }
.devtooltip .tooltip.right-center.slide-right { right:-89px }
.devtooltip:hover .tooltip.right-center.slide-right { right:-109px }

/* slide-left & slide-right common*/
.devtooltip .tooltip.center.slide-left,
.devtooltip .tooltip.center-left.slide-left,
.devtooltip .tooltip.left.slide-left,
.devtooltip .tooltip.left-center.slide-left,
.devtooltip .tooltip.right-left.slide-left,
.devtooltip .tooltip.center.slide-right,
.devtooltip .tooltip.center-left.slide-right,
.devtooltip .tooltip.left.slide-right,
.devtooltip .tooltip.left-center.slide-right,
.devtooltip .tooltip.right-left.slide-right {
 -moz-transition-property:opacity, visibility, left;
 -moz-transition-duration:0.4s, 0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, left;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, left;
 -webkit-transition-duration:0.4s, 0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, left;
 transition-duration:0.4s, 0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.center.slide-left,
.devtooltip:hover .tooltip.center-left.slide-left,
.devtooltip:hover .tooltip.left.slide-left,
.devtooltip:hover .tooltip.left-center.slide-left,
.devtooltip:hover .tooltip.right-left.slide-left,
.devtooltip:hover .tooltip.center.slide-right,
.devtooltip:hover .tooltip.center-left.slide-right,
.devtooltip:hover .tooltip.left.slide-right,
.devtooltip:hover .tooltip.left-center.slide-right,
.devtooltip:hover .tooltip.right-left.slide-right {
 -moz-transition-property:opacity, left;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, left;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, left;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, left;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip .tooltip.center-right.slide-left,
.devtooltip .tooltip.left-right.slide-left,
.devtooltip .tooltip.right.slide-left,
.devtooltip .tooltip.right-center.slide-left,
.devtooltip .tooltip.center-right.slide-right,
.devtooltip .tooltip.left-right.slide-right,
.devtooltip .tooltip.right.slide-right,
.devtooltip .tooltip.right-center.slide-right {
 -moz-transition-property:opacity, visibility, right;
 -moz-transition-duration:0.4s, 0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, right;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, right;
 -webkit-transition-duration:0.4s, 0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, right;
 transition-duration:0.4s, 0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.center-right.slide-left,
.devtooltip:hover .tooltip.left-right.slide-left,
.devtooltip:hover .tooltip.right.slide-left,
.devtooltip:hover .tooltip.right-center.slide-left,
.devtooltip:hover .tooltip.center-right.slide-right,
.devtooltip:hover .tooltip.left-right.slide-right,
.devtooltip:hover .tooltip.right.slide-right,
.devtooltip:hover .tooltip.right-center.slide-right {
 -moz-transition-property:opacity, right;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, right;
 -o-transition-duration:0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, right;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, right;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}

/* slide-up */
.devtooltip .tooltip.top.slide-up { margin-bottom:-8px; }
.devtooltip:hover .tooltip.top.slide-up { margin-bottom:12px; }
.devtooltip .tooltip.bottom.slide-up { margin-top:34px; }
.devtooltip:hover .tooltip.bottom.slide-up { margin-top:14px; }

/* slide-down*/
.devtooltip .tooltip.top.slide-down { margin-bottom:32px; }
.devtooltip:hover .tooltip.top.slide-down { margin-bottom:12px; }
.devtooltip .tooltip.bottom.slide-down { margin-top:-6px; }
.devtooltip:hover .tooltip.bottom.slide-down { margin-top:14px; }

/* slide-up & slide-down common*/
.devtooltip .tooltip.bottom.slide-up,
.devtooltip .tooltip.bottom.slide-down,
.devtooltip .tooltip.top.slide-up,
.devtooltip .tooltip.top.slide-down {
 -moz-transition-property:opacity, visibility, margin;
 -moz-transition-duration:0.4s, 0.4s, 0.8s;
 -moz-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -o-transition-property:opacity, visibility, margin-top, margin-bottom;
 -o-transition-duration:0.4s, 0.4s, 0.8s, 0.8s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, visibility, margin;
 -webkit-transition-duration:0.4s, 0.4s, 0.8s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 transition-property:opacity, visibility, margin;
 transition-duration:0.4s, 0.4s, 0.8s;
 transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
}
.devtooltip:hover .tooltip.bottom.slide-up,
.devtooltip:hover .tooltip.bottom.slide-down,
.devtooltip:hover .tooltip.top.slide-up,
.devtooltip:hover .tooltip.top.slide-down {
 -moz-transition-property:opacity, margin;
 -moz-transition-duration:0.4s, 0.4s;
 -moz-transition-timing-function:ease-in-out, ease-in-out;
 -o-transition-property:opacity, margin-top, margin-bottom;
 -o-transition-duration:0.4s, 0.4s, 0.4s;
 -o-transition-timing-function:ease-in-out, ease-in-out, ease-in-out;
 -webkit-transition-property:opacity, margin;
 -webkit-transition-duration:0.4s, 0.4s;
 -webkit-transition-timing-function:ease-in-out, ease-in-out;
 transition-property:opacity, margin;
 transition-duration:0.4s, 0.4s;
 transition-timing-function:ease-in-out, ease-in-out;
}

/**** [ widths ] ****/

/* 50px */
.devtooltip .tooltip.w50 { width:50px !important; }
.devtooltip .tooltip.center.w50,
.devtooltip:hover .tooltip.center.slide-left.w50,
.devtooltip:hover .tooltip.center.slide-right.w50 { left:-44px; }
.devtooltip .tooltip.left-center.w50,
.devtooltip:hover .tooltip.left-center.slide-left.w50,
.devtooltip:hover .tooltip.left-center.slide-right.w50 { left:-33px; }
.devtooltip .tooltip.right-center.w50,
.devtooltip:hover .tooltip.right-center.slide-left.w50,
.devtooltip:hover .tooltip.right-center.slide-right.w50 { right:-34px; }
.devtooltip .tooltip.center.slide-left.w50 { left:-24px; }
.devtooltip .tooltip.left-center.slide-left.w50 { left:-13px; }
.devtooltip .tooltip.right-center.slide-left.w50 { right:-54px; }
.devtooltip .tooltip.center.slide-right.w50 { left:-64px; }
.devtooltip .tooltip.left-center.slide-right.w50 { left:-53px; }
.devtooltip .tooltip.right-center.slide-right.w50 { right:-14px; }

/* 100px */
.devtooltip .tooltip.w100 { width:100px !important; }
.devtooltip .tooltip.center.w100,
.devtooltip:hover .tooltip.center.slide-left.w100,
.devtooltip:hover .tooltip.center.slide-right.w100 { left:-69px; }
.devtooltip .tooltip.left-center.w100,
.devtooltip:hover .tooltip.left-center.slide-left.w100,
.devtooltip:hover .tooltip.left-center.slide-right.w100 { left:-58px; }
.devtooltip .tooltip.right-center.w100,
.devtooltip:hover .tooltip.right-center.slide-left.w100,
.devtooltip:hover .tooltip.right-center.slide-right.w100 { right:-59px; }
.devtooltip .tooltip.center.slide-left.w100 { left:-49px; }
.devtooltip .tooltip.left-center.slide-left.w100 { left:-38px; }
.devtooltip .tooltip.right-center.slide-left.w100 { right:-79px; }
.devtooltip .tooltip.center.slide-right.w100 { left:-89px; }
.devtooltip .tooltip.left-center.slide-right.w100 { left:-78px; }
.devtooltip .tooltip.right-center.slide-right.w100 { right:-39px; }

/* 150px */
.devtooltip .tooltip.w150 { width:150px !important; }
.devtooltip .tooltip.center.w150,
.devtooltip:hover .tooltip.center.slide-left.w150,
.devtooltip:hover .tooltip.center.slide-right.w150 { left:-94px; }
.devtooltip .tooltip.left-center.w150,
.devtooltip:hover .tooltip.left-center.slide-left.w150,
.devtooltip:hover .tooltip.left-center.slide-right.w150 { left:-83px; }
.devtooltip .tooltip.right-center.w150,
.devtooltip:hover .tooltip.right-center.slide-left.w150,
.devtooltip:hover .tooltip.right-center.slide-right.w150 { right:-84px; }
.devtooltip .tooltip.center.slide-left.w150 { left:-74px; }
.devtooltip .tooltip.left-center.slide-left.w150 { left:-63px; }
.devtooltip .tooltip.right-center.slide-left.w150 { right:-104px; }
.devtooltip .tooltip.center.slide-right.w150 { left:-114px; }
.devtooltip .tooltip.left-center.slide-right.w150 { left:-103px; }
.devtooltip .tooltip.right-center.slide-right.w150 { right:-64px; }

/* 200px  */
.devtooltip .tooltip.w200 { width:200px !important; }
.devtooltip .tooltip.center.w200,
.devtooltip:hover .tooltip.center.slide-left.w200,
.devtooltip:hover .tooltip.center.slide-right.w200 { left:-119px; }
.devtooltip .tooltip.left-center.w200,
.devtooltip:hover .tooltip.left-center.slide-left.w200,
.devtooltip:hover .tooltip.left-center.slide-right.w200 { left:-108px; }
.devtooltip .tooltip.right-center.w200,
.devtooltip:hover .tooltip.right-center.slide-left.w200,
.devtooltip:hover .tooltip.right-center.slide-right.w200 { right:-109px; }
.devtooltip .tooltip.center.slide-left.w200 { left:-99px; }
.devtooltip .tooltip.left-center.slide-left.w200 { left:-88px; }
.devtooltip .tooltip.right-center.slide-left.w200 { right:-129px; }
.devtooltip .tooltip.center.slide-right.w200 { left:-139px; }
.devtooltip .tooltip.left-center.slide-right.w200 { left:-128px; }
.devtooltip .tooltip.right-center.slide-right.w200 { right:-89px; }

/* 250px */
.devtooltip .tooltip.w250 { width:250px !important; }
.devtooltip .tooltip.center.w250,
.devtooltip:hover .tooltip.center.slide-left.w250,
.devtooltip:hover .tooltip.center.slide-right.w250 { left:-144px; }
.devtooltip .tooltip.left-center.w250,
.devtooltip:hover .tooltip.left-center.slide-left.w250,
.devtooltip:hover .tooltip.left-center.slide-right.w250 { left:-133px; }
.devtooltip .tooltip.right-center.w250,
.devtooltip:hover .tooltip.right-center.slide-left.w250,
.devtooltip:hover .tooltip.right-center.slide-right.w250 { right:-134px; }
.devtooltip .tooltip.center.slide-left.w250 { left:-124px; }
.devtooltip .tooltip.left-center.slide-left.w250 { left:-113px; }
.devtooltip .tooltip.right-center.slide-left.w250 { right:-154px; }
.devtooltip .tooltip.center.slide-right.w250 { left:-164px; }
.devtooltip .tooltip.left-center.slide-right.w250 { left:-153px; }
.devtooltip .tooltip.right-center.slide-right.w250 { right:-114px; }

/* 300px */
.devtooltip .tooltip.w300 { width:300px !important; }
.devtooltip .tooltip.center.w300,
.devtooltip:hover .tooltip.center.slide-left.w300,
.devtooltip:hover .tooltip.center.slide-right.w300 { left:-169px; }
.devtooltip .tooltip.left-center.w300,
.devtooltip:hover .tooltip.left-center.slide-left.w300,
.devtooltip:hover .tooltip.left-center.slide-right.w300 { left:-158px; }
.devtooltip .tooltip.right-center.w300,
.devtooltip:hover .tooltip.right-center.slide-left.w300,
.devtooltip:hover .tooltip.right-center.slide-right.w300 { right:-159px; }
.devtooltip .tooltip.center.slide-left.w300 { left:-149px; }
.devtooltip .tooltip.left-center.slide-left.w300 { left:-138px; }
.devtooltip .tooltip.right-center.slide-left.w300 { right:-179px; }
.devtooltip .tooltip.center.slide-right.w300 { left:-189px; }
.devtooltip .tooltip.left-center.slide-right.w300 { left:-178px; }
.devtooltip .tooltip.right-center.slide-right.w300 { right:-139px; }

/* 350px */
.devtooltip .tooltip.w350 { width:350px !important; }
.devtooltip .tooltip.center.w350,
.devtooltip:hover .tooltip.center.slide-left.w350,
.devtooltip:hover .tooltip.center.slide-right.w350 { left:-194px; }
.devtooltip .tooltip.left-center.w350,
.devtooltip:hover .tooltip.left-center.slide-left.w350,
.devtooltip:hover .tooltip.left-center.slide-right.w350 { left:-183px; }
.devtooltip .tooltip.right-center.w350,
.devtooltip:hover .tooltip.right-center.slide-left.w350,
.devtooltip:hover .tooltip.right-center.slide-right.w350 { right:-184px; }
.devtooltip .tooltip.center.slide-left.w350 { left:-174px; }
.devtooltip .tooltip.left-center.slide-left.w350 { left:-163px; }
.devtooltip .tooltip.right-center.slide-left.w350 { right:-204px; }
.devtooltip .tooltip.center.slide-right.w350 { left:-214px; }
.devtooltip .tooltip.left-center.slide-right.w350 { left:-203px; }
.devtooltip .tooltip.right-center.slide-right.w350 { right:-164px; }

/* 400px */
.devtooltip .tooltip.w400 { width:400px !important; }
.devtooltip .tooltip.center.w400,
.devtooltip:hover .tooltip.center.slide-left.w400,
.devtooltip:hover .tooltip.center.slide-right.w400 { left:-219px; }
.devtooltip .tooltip.left-center.w400,
.devtooltip:hover .tooltip.left-center.slide-left.w400,
.devtooltip:hover .tooltip.left-center.slide-right.w400 { left:-208px; }
.devtooltip .tooltip.right-center.w400,
.devtooltip:hover .tooltip.right-center.slide-left.w400,
.devtooltip:hover .tooltip.right-center.slide-right.w400 { right:-209px; }
.devtooltip .tooltip.center.slide-left.w400 { left:-199px; }
.devtooltip .tooltip.left-center.slide-left.w400 { left:-188px; }
.devtooltip .tooltip.right-center.slide-left.w400 { right:-229px; }
.devtooltip .tooltip.center.slide-right.w400 { left:-239px; }
.devtooltip .tooltip.left-center.slide-right.w400 { left:-228px; }
.devtooltip .tooltip.right-center.slide-right.w400 { right:-189px; }

/* 450px */
.devtooltip .tooltip.w450 { width:450px !important; }
.devtooltip .tooltip.center.w450,
.devtooltip:hover .tooltip.center.slide-left.w450,
.devtooltip:hover .tooltip.center.slide-right.w450 { left:-244px; }
.devtooltip .tooltip.left-center.w450,
.devtooltip:hover .tooltip.left-center.slide-left.w450,
.devtooltip:hover .tooltip.left-center.slide-right.w450 { left:-233px; }
.devtooltip .tooltip.right-center.w450,
.devtooltip:hover .tooltip.right-center.slide-left.w450,
.devtooltip:hover .tooltip.right-center.slide-right.w450 { right:-234px; }
.devtooltip .tooltip.center.slide-left.w450 { left:-224px; }
.devtooltip .tooltip.left-center.slide-left.w450 { left:-213px; }
.devtooltip .tooltip.right-center.slide-left.w450 { right:-254px; }
.devtooltip .tooltip.center.slide-right.w450 { left:-264px; }
.devtooltip .tooltip.left-center.slide-right.w450 { left:-253px; }
.devtooltip .tooltip.right-center.slide-right.w450 { right:-214px; }

/* 500px */
.devtooltip .tooltip.w500 { width:500px !important; }
.devtooltip .tooltip.center.w500,
.devtooltip:hover .tooltip.center.slide-left.w500,
.devtooltip:hover .tooltip.center.slide-right.w500 { left:-269px; }
.devtooltip .tooltip.left-center.w500,
.devtooltip:hover .tooltip.left-center.slide-left.w500,
.devtooltip:hover .tooltip.left-center.slide-right.w500 { left:-258px; }
.devtooltip .tooltip.right-center.w500,
.devtooltip:hover .tooltip.right-center.slide-left.w500,
.devtooltip:hover .tooltip.right-center.slide-right.w500 { right:-259px; }
.devtooltip .tooltip.center.slide-left.w500 { left:-249px; }
.devtooltip .tooltip.left-center.slide-left.w500 { left:-238px; }
.devtooltip .tooltip.right-center.slide-left.w500 { right:-279px; }
.devtooltip .tooltip.center.slide-right.w500 { left:-289px; }
.devtooltip .tooltip.left-center.slide-right.w500 { left:-278px; }
.devtooltip .tooltip.right-center.slide-right.w500 { right:-239px; }

/* widths common */
.devtooltip .tooltip.w50,
.devtooltip .tooltip.w100,
.devtooltip .tooltip.w150,
.devtooltip .tooltip.w200,
.devtooltip .tooltip.w250,
.devtooltip .tooltip.w300,
.devtooltip .tooltip.w350,
.devtooltip .tooltip.w400,
.devtooltip .tooltip.w450,
.devtooltip .tooltip.w500 {
 white-space:normal !important; 
}
.devtooltip .tooltip.w50 .title,
.devtooltip .tooltip.w100 .title,
.devtooltip .tooltip.w150 .title,
.devtooltip .tooltip.w200 .title,
.devtooltip .tooltip.w250 .title,
.devtooltip .tooltip.w300 .title,
.devtooltip .tooltip.w350 .title,
.devtooltip .tooltip.w400 .title,
.devtooltip .tooltip.w450 .title,
.devtooltip .tooltip.w500 .title {
 display:inline-block; /* IE8 trick */
}
/**** [ colors ] ****/

/* icy blue */
.devtooltip .tooltip.icyblue {
 background:-moz-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* FF3.6+ */
 background:-ms-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* IE10+ */ 
 background:-o-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* Opera11.10+ */  
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #94CED4), color-stop(15%, #B1DBE0), color-stop(100%, #94CED4)); /* Chrome, Safari4+ */
 background:-webkit-linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* Chrome10+, Safari5.1+ */
 background: linear-gradient(top, #94CED4 0%, #B1DBE0 15%, #94CED4 100%); /* W3C */ 
 background-color:#94CED4;
 border-color:#69B3BB;
 color:#57777B;
}
.devtooltip .tooltip.icyblue.bottom:before { border-bottom:12px solid #69B3BB; }
.devtooltip .tooltip.icyblue.bottom:after { border-bottom:12px solid #94CED4; }
.devtooltip .tooltip.icyblue.top:before { border-top:12px solid #69B3BB; }
.devtooltip .tooltip.icyblue.top:after { border-top:12px solid #94CED4; }
.devtooltip .tooltip.icyblue .title { border-bottom:solid 1px #87BEC4; }

/* sky blue */
.devtooltip .tooltip.skyblue {
 background:-moz-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-ms-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-o-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #93B8D4), color-stop(15%, #B0CBE0), color-stop(100%, #93B8D4));
 background:-webkit-linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background: linear-gradient(top, #93B8D4 0%, #B0CBE0 15%, #93B8D4 100%);
 background-color:#93B8D4;
 border-color:#6997BB;
 color:#576B7B;
}
.devtooltip .tooltip.skyblue.bottom:before { border-bottom:12px solid #6997BB; }
.devtooltip .tooltip.skyblue.bottom:after { border-bottom:12px solid #93B8D4; }
.devtooltip .tooltip.skyblue.top:before { border-top:12px solid #6997BB; }
.devtooltip .tooltip.skyblue.top:after { border-top:12px solid #93B8D4; }
.devtooltip .tooltip.skyblue .title { border-bottom:solid 1px #87AAC4; }

/* red */
.devtooltip .tooltip.red {
 background:-moz-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-ms-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-o-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #DE888E), color-stop(15%, #E8A8AD), color-stop(100%, #DE888E));
 background:-webkit-linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background: linear-gradient(top, #DE888E 0%, #E8A8AD 15%, #DE888E 100%);
 background-color:#DE888E;
 border-color:#C85B62;
 color:#815154;
}
.devtooltip .tooltip.red.bottom:before { border-bottom:12px solid #C85B62; }
.devtooltip .tooltip.red.bottom:after { border-bottom:12px solid #DE888E; }
.devtooltip .tooltip.red.top:before { border-top:12px solid #C85B62; }
.devtooltip .tooltip.red.top:after { border-top:12px solid #DE888E; }
.devtooltip .tooltip.red .title { border-bottom:solid 1px #CE7D82; }

/* yellow */
.devtooltip .tooltip.yellow {
 background:-moz-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-ms-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-o-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #E5DE82), color-stop(15%, #ECE8A4), color-stop(100%, #E5DE82));
 background:-webkit-linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background: linear-gradient(top, #E5DE82 0%, #ECE8A4 15%, #E5DE82 100%);
 background-color:#E5DE82;
 border-color:#D0C753;
 color:#84814D;
}
.devtooltip .tooltip.yellow.bottom:before { border-bottom:12px solid #D0C753; }
.devtooltip .tooltip.yellow.bottom:after { border-bottom:12px solid #E5DE82; }
.devtooltip .tooltip.yellow.top:before { border-top:12px solid #D0C753; }
.devtooltip .tooltip.yellow.top:after { border-top:12px solid #E5DE82; }
.devtooltip .tooltip.yellow .title { border-bottom:solid 1px #D4CD77; }

/* orange */
.devtooltip .tooltip.orange {
 background:-moz-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-ms-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-o-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #E9A37E), color-stop(15%, #EFBCA0), color-stop(100%, #E9A37E));
 background:-webkit-linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background: linear-gradient(top, #E9A37E 0%, #EFBCA0 15%, #E9A37E 100%);
 background-color:#E9A37E;
 border-color:#D57D4E;
 color:#86604B;
}
.devtooltip .tooltip.orange.bottom:before { border-bottom:12px solid #D57D4E; }
.devtooltip .tooltip.orange.bottom:after { border-bottom:12px solid #E9A37E; }
.devtooltip .tooltip.orange.top:before { border-top:12px solid #D57D4E; }
.devtooltip .tooltip.orange.top:after { border-top:12px solid #E9A37E; }
.devtooltip .tooltip.orange .title { border-bottom:solid 1px #D89673; }

/* purple */
.devtooltip .tooltip.purple {
 background:-moz-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-ms-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-o-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #D493CE), color-stop(15%, #E0B0DB), color-stop(100%, #D493CE));
 background:-webkit-linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background: linear-gradient(top, #D493CE 0%, #E0B0DB 15%, #D493CE 100%);
 background-color:#D493CE;
 border-color:#BB69B3;
 color:#7B5777;
}
.devtooltip .tooltip.purple.bottom:before { border-bottom:12px solid #BB69B3; }
.devtooltip .tooltip.purple.bottom:after { border-bottom:12px solid #D493CE; }
.devtooltip .tooltip.purple.top:before { border-top:12px solid #BB69B3; }
.devtooltip .tooltip.purple.top:after { border-top:12px solid #D493CE; }
.devtooltip .tooltip.purple .title { border-bottom:solid 1px #C487BE; }

/* magenta */
.devtooltip .tooltip.magenta {
 background:-moz-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-ms-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-o-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #D493B8), color-stop(15%, #E0B0CB), color-stop(100%, #D493B8));
 background:-webkit-linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background: linear-gradient(top, #D493B8 0%, #E0B0CB 15%, #D493B8 100%);
 background-color:#D493B8;
 border-color:#BB6997;
 color:#7B576B;
}
.devtooltip .tooltip.magenta.bottom:before { border-bottom:12px solid #BB6997; }
.devtooltip .tooltip.magenta.bottom:after { border-bottom:12px solid #D494B8; }
.devtooltip .tooltip.magenta.top:before { border-top:12px solid #BB6997; }
.devtooltip .tooltip.magenta.top:after { border-top:12px solid #D494B8; }
.devtooltip .tooltip.magenta .title { border-bottom:solid 1px #C487AA; }

/* grey */
.devtooltip .tooltip.grey {
 background:-moz-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-ms-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-o-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACACA), color-stop(15%, #D8D8D8), color-stop(100%, #CACACA));
 background:-webkit-linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background: linear-gradient(top, #CACACA 0%, #D8D8D8 15%, #CACACA 100%);
 background-color:#CACACA;
 border-color:#B2B2B2;
 color:#696969;
}
.devtooltip .tooltip.grey.bottom:before { border-bottom:12px solid #B2B2B2; }
.devtooltip .tooltip.grey.bottom:after { border-bottom:12px solid #CACACA; }
.devtooltip .tooltip.grey.top:before { border-top:12px solid #B2B2B2; }
.devtooltip .tooltip.grey.top:after { border-top:12px solid #CACACA; }
.devtooltip .tooltip.grey .title { border-bottom:solid 1px #ADADAD; }

/* olivegreen */
.devtooltip .tooltip.olivegreen {
 background:-moz-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-ms-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-o-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #B9DE88), color-stop(15%, #CCE8A8), color-stop(100%, #B9DE88));
 background:-webkit-linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background: linear-gradient(top, #B9DE88 0%, #CCE8A8 15%, #B9DE88 100%);
 background-color:#B9DE88;
 border-color:#99C85B;
 color:#6C8151;
}
.devtooltip .tooltip.olivegreen.bottom:before { border-bottom:12px solid #99C85B; }
.devtooltip .tooltip.olivegreen.bottom:after { border-bottom:12px solid #B9DE88; }
.devtooltip .tooltip.olivegreen.top:before { border-top:12px solid #99C85B; }
.devtooltip .tooltip.olivegreen.top:after { border-top:12px solid #B9DE88; }
.devtooltip .tooltip.olivegreen .title { border-bottom:solid 1px #ABCE7D; }

/* grassgreen */
.devtooltip .tooltip.grassgreen {
 background:-moz-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-ms-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-o-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CDE88), color-stop(15%, #B7E8A8), color-stop(100%, #9CDE88));
 background:-webkit-linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background: linear-gradient(top, #9CDE88 0%, #B7E8A8 15%, #9CDE88 100%);
 background-color:#9CDE88;
 border-color:#75C85B;
 color:#5C8151;
}
.devtooltip .tooltip.grassgreen.bottom:before { border-bottom:12px solid #75C85B; }
.devtooltip .tooltip.grassgreen.bottom:after { border-bottom:12px solid #9CDE88; }
.devtooltip .tooltip.grassgreen.top:before { border-top:12px solid #75C85B; }
.devtooltip .tooltip.grassgreen.top:after { border-top:12px solid #9CDE88; }
.devtooltip .tooltip.grassgreen .title { border-bottom:solid 1px #90CE7D; }

/* brown */
.devtooltip .tooltip.brown {
 background:-moz-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-ms-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-o-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #C8AC9E), color-stop(15%, #D8C3B8), color-stop(100%, #C8AC9E));
 background:-webkit-linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background: linear-gradient(top, #C8AC9E 0%, #D8C3B8 15%, #C8AC9E 100%);
 background-color:#C8AC9E;
 border-color:#AF8975;
 color:#75655C;
}
.devtooltip .tooltip.brown.bottom:before { border-bottom:12px solid #AF8975; }
.devtooltip .tooltip.brown.bottom:after { border-bottom:12px solid #C8AC9E; }
.devtooltip .tooltip.brown.top:before { border-top:12px solid #AF8975; }
.devtooltip .tooltip.brown.top:after { border-top:12px solid #C8AC9E; }
.devtooltip .tooltip.brown .title { border-bottom:solid 1px #BB9F90; }

/* black */
.devtooltip .tooltip.black {
 background:-moz-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-ms-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-o-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #1D1D1D), color-stop(15%, #303030), color-stop(100%, #1D1D1D));
 background:-webkit-linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%);
 background: linear-gradient(top, #1D1D1D 0%, #303030 15%, #1D1D1D 100%); 
 background-color:#1D1D1D;
 border-color:#121212;
 -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 box-shadow:0 1px 4px rgba(0, 0, 0, 0.25), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 1px rgba(255, 255, 255, 0.7) inset;
 color:#EEE;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.5);
}
.devtooltip .tooltip.black.bottom:before { border-bottom:12px solid #121212; }
.devtooltip .tooltip.black.bottom:after { border-bottom:12px solid #1D1D1D; }
.devtooltip .tooltip.black.top:before { border-top:12px solid #121212; }
.devtooltip .tooltip.black.top:after { border-top:12px solid #1D1D1D; }
.devtooltip .tooltip.black .title {
 border-bottom:solid 1px #0D0D0D;
 -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
The HTML Part:
For Icyblue Tooltip :
<a href="#" class="devtooltip"><span class="tooltip icyblue bottom center w200 slide-up">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>icyblue tooltip</a>
For Skyblue Tooltip :
<a href="#" class="devtooltip"><span class="tooltip skyblue top center-left w150 fade">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>skyblue tooltip</a>
For Red Tooltip :
<a href="#" class="devtooltip"><span class="tooltip red bottom center-right w100 slide-left">Dev-Tech:All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>red tooltip</a>
For Purple Tooltip :
<a href="#" class="devtooltip"><span class="tooltip purple top left w250 slide-right"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>purple tooltip</a>
For Magenta Tooltip :
<a href="#" class="devtooltip"><span class="tooltip magenta bottom left-center w150 slide-down"><span class="title">Dev-Tech</span>All About Technology. A Blog about Technology, Web Design, Blogspot, Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>magenta tooltip</a>
For Yellow Tooltip :
<a href="#" class="devtooltip"><span class="tooltip yellow bottom left-right w50 slide-down">All About Technology. A Blog about Technology, Web Design, Blogspot, Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>yellow tooltip</a>
For Olivegreen Tooltip :
<a href="#" class="devtooltip"><span class="tooltip olivegreen top right w150"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>olivegreen tooltip</a>
For Grassgreen Tooltip :
<a href="#" class="devtooltip"><span class="tooltip grassgreen bottom right-center w400 slide-up"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>grassgreen tooltip</a>
For Black Tooltip :
<a href="#" class="devtooltip"><span class="tooltip black top right-left w450 slide-down"><span class="title">Dev-Tech</span>All About Technology.A Blog about Technology,Web Design,Blogspot,Blogger Tricks,CSS,JS,HTML,SEO and Many More.</span>black tooltip</a>
How to Add this in Blogger ?      
1.Add The CSS above    </b:skin>         
2. Paste THE CSS part    
3.In your post which word you want to use as tooltip just write like above HTML codes.    
(N.B : Be carefull while working with these codes.please make a backup of your TEMPLATE)
Posted by

Share to:

Post a Comment Blogger

Thank you..

Subscribe to: Post Comments (Atom)
 
Top