Implement tooltip prompt box, CSS arrow and shape in pure CSS, tooltipcss

Source: Internet
Author: User

Implement tooltip prompt box, CSS arrow and shape in pure CSS, tooltipcss

This section describes how to use CSS to make prompt boxes, arrows, and other shapes like tooltip!

First introduce CSS: after Selector

Definition and usage: (See w3school: after selector)

: The after selector inserts content after the content of the selected element and uses the content attribute to specify the content to be inserted.

Example:

P: after {content: "line:-"; background-color: yellow; color: red; font-weight: bold ;}View Code

For details, refer to w3school!

 

The following describes how to use the "after" selector to create a CSS arrow and other prompt boxes: (here we will make a simple design step by step. The content added in each step is the style code content added in the previous step, note the difference !)
First, our HTML code:

<Body> <div class = "demo"> </div> </body>View Code

Let's set the style of the box:

<Style>. demo {background-color: lightgreen; height: 100px; position: relative; width: 100px ;}</style>View Code

:

Note that the position attribute is set to relative to allow us to set our "Arrow" (which has not yet appeared) to absolutely locate and keep it in touch with our box!

 

Next, insert the "Arrow" (not displayed yet) to the basic style:

<Style>. demo {background-color: lightgreen; height: 100px; position: relative; width: 100px ;}. demo: after {content: ''; position: absolute; height: 20px; width: 20px; background: yellow ;}</style>View Code

:

You will notice something. 1. We just inserted a yellow square, which is the square we will design as an arrow; 2. We set absolute positioning for absolute so that we can move it to the desired location!

Next, set the border for the yellow square (the predecessor of the "Arrow"). The border here is the object of the arrow and the content of the yellow square is removed (by setting. demo: remove the yellow square from the style "height: 0; width: 0" in "after". Here we omit the height and width of the yellow square ):

<Style>. demo {background-color: lightgreen; height: 100px; position: relative; width: 100px ;}. demo: after {content: ''; position: absolute; // height: 20px; // width: 20px; background: yellow; border: 10px solid gray;} </style>View Code

:

 

Now we can design the gray box as an arrow:

<Style>. demo {background-color: lightgreen; height: 100px; position: relative; width: 100px ;}. demo: after {content: ''; position: absolute; // height: 20px; // width: 20px; // background: yellow; // border: 10px solid gray; border: 10px solid transparent; border-top-color: gray} </style>View Code

:

OK! We can see the arrow forming!

 

Let's set the position as we want (the arrow in this example moves to the lower end ):

<Style>. demo {background-color: lightgreen; height: 100px; position: relative; width: 100px ;}. demo: after {content: ''; position: absolute; // height: 20px; // width: 20px; // background: yellow; // border: 10px solid gray; border: 10px solid transparent; border-top-color: gray; top: 100%; left: 10px ;}</style>View Code

:

It's basically done here.

 

Under the overall style design below (in fact, the background color of the box is changed to be the same as that of the arrow ):

<Style>. demo {background-color: gray; height: 100px; position: relative; width: 100px ;}. demo: after {content: ''; position: absolute; // height: 20px; // width: 20px; // background: yellow; // border: 10px solid gray; border: 10px solid transparent; border-top-color: gray; top: 100%; left: 10px ;}</style>View Code

:

 

You can set the specific style! For example, you can move the arrow to the other three sides and set border-T \ R \ B \ L-color: gray; and TRBL (TRBL refers to top \ right \ bottom \ left!

Of course, you must note that the size of the border is not included in the size of the box! Therefore, pay attention to the impact of margin during design. For example, if the arrow is centered in the lower border, we need to add "margin-left:-10px;" at the same time!

 

Conclusion: Comments from yy duckweed's life (concise image ~~ Haha ~~) :

Design Principle of this example: Set the width and height of the pseudo-class selector box to 0, and the border area is [X]. The other three sides are transparent, so a triangle is displayed!

 

(For more information, see YUI Team: CSS Quick Tip: CSS Arrows and Shapes Without Markup)

 

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.