Home > Developer > JavaScript
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 CodeFor 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:
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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
