Using CSS to implement a fully compatible ToolTip prompt box

In the previous article, using CSS to implement a fully compatible triangle icon, this triangle icon can be used in a variety of scenes, such as the next Latoupe, multilevel menu, this article we use this icon through the pure CSS to implement a common ToolTip prompt box .

Eventually:

Basic principle

First set a background color of the normal div box, and then use the previous post to get the triangle icon, the div box To set the relative positioning mode, triangular icon set to absolute positioning, position relative to the div box, adjust to the appropriate position. So we get a basic ToolTip, but no border looks uncomfortable, we can set a border for the Div box, it's not that difficult, but how does the triangle icon set the border? Here we through a trickery way, let two different color triangle icon overlay, and position staggered 1px, so that the bottom triangle top border is covered, only revealing the left and right border part, superimposed together we get a seemingly framed triangle icon.

Step by step

1. First define a relative positioning box div:

<div class= "ToolTips" >  </div>

Css:

. Tooltips{position:relative;width:300px;height:80px;line-height:60px;background: #D7E7FC; border-radius:4px;}

Effect:

2. Next, using the previous post knowledge we add a triangular icon to the div box:

<div class= "ToolTips" >  <div class= "Arrow" ></div></div>

Triangle icon CSS:

. arrow{  Position:absolute;  Color: #D7E7FC;  width:0px;  height:0px;  line-height:0px;  border-width:20px 15px 0;  Border-style:solid dashed dashed dashed;  border-left-color:transparent;  border-right-color:transparent;  Bottom: -20px;  right:50%;}

　　

Effect:

The initial prototype, can even be used directly, but if the ToolTip background color and the target background color coincide, then it is difficult for me to distinguish it, so we need to define a border.

3. Add border
Css:

. tooltips{  position:relative;  width:300px;  height:80px;  line-height:60px;  Background: #D7E7FC;  border:1px solid #A5C4EC;  border-radius:4px;}

　　

Effect:

The box has a border effect, but the following small triangle has not been "protected", which is simply intolerable for Virgo!

4. Put an elastic band on the "Small triangle"
As we have said in the previous tutorial, we need to use two triangular overlays, first we define two triangle div, one background color and box border color is the same, a background color and the box background color consistent:

<div class= "ToolTips" >  <div class= "Arrow arrow-border" ></div>  <div class= "Arrow ARROW-BG "></div></div>

　　

The CSS is defined as follows:

. arrow{  Position:absolute;  width:0px;  height:0px;  line-height:0px;  border-width:20px 15px 0;  Border-style:solid dashed dashed dashed;  border-left-color:transparent;  Border-right-color:transparent;}. arrow-border{  color: #A5C4EC;  Bottom: -20px;  right:50%;}. arrow-bg{  color: #D7E7FC;  Bottom: -19px;  right:50%;}

　　

Note: The bottom position of the. ARROW-BG and. Arrow-border is 1px (adjustable according to the border width) The order of the two div is not reversed.
Let's take a look at the final effect:

Ok! is done, IE6 run, fully compatible!

Using CSS to implement a fully compatible ToolTip prompt box