Using CSS to implement a fully compatible ToolTip prompt box

Source: Internet
Author: User
Tags border color

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

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.