Using CSS to implement fully compatible ToolTip prompt box _ basic Tutorial

Source: Internet
Author: User
Tags border color


Final Effect Diagram:

Basic principle

First set a background color of the ordinary div box, and then use the Last post to the Triangle icon, the div box set to the relative positioning mode, triangular icon set to absolute positioning, position relative to the div box, adjust to the appropriate position. This gets a basic ToolTip, but without the border it always looks uncomfortable, we can set a border on the Div box, which is not difficult, but how does the triangle icon set the border? Here we go through a tricky way, so that two different colors of the triangle icon overlay, and the position staggered 1px, so that the bottom triangle top border is covered, only the left and right border parts, superimposed together we get a seemingly border triangle icon.

Step by step

1. First define a relative positioning of the 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 of the post, 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:

Initial prototype, can even be used directly, but if ToolTip background color and target background color overlap, then I am very difficult to distinguish, 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 small triangle below has not been "protected", which is simply intolerable for Virgo!

4. To "small triangle put on elastic band"
Before explaining the principle we have said that we need to use two triangles overlay, first we define two triangle Div, a background color and box border color is the same, a background color and box background color is the same:

    <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 bottom position of the. ARROW-BG and. Arrow-border is 1px (adjustable according to the border width) The order of the two div cannot be reversed.
Let's take a look at the final effect:

Ok! is done, IE6 run down, completely compatible!

In the next article we will improve our ToolTips by implementing a jquery ToolTips plugin

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.