css compatible tooltip prompt box method_html/css_WEB-ITnose

Final rendering:

Basic principle

First set an ordinary div box with a background color, and then use the triangle shape obtained in the previous post For the icon, set the div box to relative positioning mode, set the triangle icon to absolute positioning, and adjust the position to the appropriate position relative to the div box. This will get a basic tooltip, but it always looks uncomfortable without a border. We can set a border for the div box, which is not difficult, but how to set the border for the triangle icon? Here we use a clever way to superimpose two triangle icons of different colors and stagger their positions by 1px. In this way, the top border of the bottom triangle is covered, and only the left and right border parts are exposed. When superimposed together, we get a triangle that looks like a border. icon.

step by step

1. First define a relatively positioned 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 knowledge from the previous post, we add a triangle 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:

has begun to take shape, and can even be used directly, but if the tooltip background color and target If the background colors overlap, it will be difficult for us to distinguish them, so we need to define a border for it.

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 small triangle below is still Not being "protected" is simply intolerable for Virgos!

4. Put an elastic band on the "small triangle"
We have already said when explaining the principle that we need to use the method of superimposing two triangles. First, we define the div of the two triangles and a background color The same color as the border of the box, and a background color consistent with the background color of the box:

    <div class="tooltips"> <div class="arrow arrow-border"></div> <div class="arrow arrow-bg"></div> </div>

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 difference in the bottom positions of .arrow-bg and .arrow-border is 1px (can be adjusted according to the border width). The order of the two divs cannot be reversed.
Let’s take a look at the final effect:

ok! You’re done, run it under IE6, it’s fully compatible!