The tooltip style has been implemented by hand many times during development, so here’s a summary for future copy-and-paste purposes.
As shown above, common tooltips come in three types: a plain background color with no border, a border, and a background image, where small triangles may be a solid color with curved points.
Here are four common ways to implement tooltip.
map
Simple and convenient, a triangle of the map can be set. With the help of my girlfriend, I successfully drew three kinds of triangles with AI.
Now all we have to do is put the triangle under the rectangle.
-
Solid background color triangle
.wxml<view class="tooltip"> <view class="tooltip-text">src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-01.png" /> .wxss .tooltip { width: 400rpx; margin: 100rpx; position: relative; } .tooltip-text { height: 60rpx; line-height: 60rpx; background: #F5F8FF; color: #494949; border-radius: 5rpx; padding: 0 20rpx; } .tooltip-triangle { position: absolute; width: 30rpx; height: 30rpx; top: 60rpx; left: 200rpx; }Copy the code -
Border triangles and triangle fillets
.wxml<view class="tooltip"> <view class="tooltip-text">src="https://windliangblog.oss-cn-beijing.aliyuncs.com/tooltip-02.png" /> .wxss .tooltip { width: 400rpx; margin: 100rpx; position: relative; } .tooltip-text { height: 60rpx; line-height: 60rpx; background: #f5f8ff; color: #494949; border-radius: 5rpx; padding: 0 20rpx; border: 2px solid #002fa7; } .tooltip-triangle { position: absolute; width: 30rpx; height: 30rpx; top: 62rpx; left: 200rpx; }Copy the codeI found that the original border was not covered, and then MADE a new map extending the background color from the top.
For rounded triangles, replace image SRC.
Using the border
I don’t know who first thought of this kind of solution, it is really amazing. We often write border, but have you ever wondered what the four corners of the border look like?
Let’s zoom in on the joint:
You’ll see that each edge is actually a trapezoid, and then it connects to each other. What if the content in the border has a width and height of 0?
.border {
border-width: 4px;
border-color: #F00 #0F0 #00F #0FF;
border-style: solid;
width: 0px;
height: 0px;
}
Copy the code
The triangle appears! #F00 transparent transparent; #F00 transparent; #F00 transparent; #F00 transparent;
In addition, although the bottom boder is set to transparent, it still occupies the height. We can set its width to 0: border-bottom-width: 0.
Then we just need to replace the image we used before.
.wxml<view class="tooltip"> <view class="tooltip-text"> </view> </view>.wxss
.tooltip {
max-width: 400rpx;
margin-left: 20rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #002FA7;
color: #fff;
border-radius: 5rpx;
}
.tooltip-triangle {
position: absolute;
top: 62rpx;
left: 200rpx;
border-width: 30rpx;
border-color: #002FA7 transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
}
Copy the codeThe effect is as follows:
For triangular shapes, we can use the border-width property to adjust height and width.
- Border triangle
The top rectangle and triangle have no borders. If they have borders, how do you implement the bottom one?
In fact, it is very simple, we just need to write the same triangle in the place of the original triangle, and then set the color to the background color of the dialog box, offset some position up.
Set the color of the overlaid triangle to red so that it looks obvious, as shown below:
The code is as follows:
.wxml<view class="tooltip"> <view class="tooltip-text"top"></view>
<view class="tooltip-triangle"></view>
</view>
.wxss
.tooltip {
max-width: 400rpx;
margin-left: 20rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #fff;
border-radius: 5rpx;
border: 5rpx solid #002FA7;
}
.tooltip-triangle-top {
position: absolute;
top: 71rpx;
left: 200rpx;
border-width: 30rpx;
border-left-width: 20rpx;
border-right-width: 20rpx;
border-color: #FFF transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
z-index: 10;
}
.tooltip-triangle {
position: absolute;
top: 76rpx;
left: 200rpx;
border-width: 30rpx;
border-left-width: 20rpx;
border-right-width: 20rpx;
border-color: #002FA7 transparent transparent transparent;
border-style: solid;
width: 0px;
height: 0px;
}
Copy the codeRectangular rotation
Just two rectangles in the same position, and then rotate the top one. The long side of the rotated triangle is the length of the original rectangle, and the ratio of the sides is 1 to 1 over the square root of 2. So the length ratio of the original rectangle should be square root of 2 to 1. Width = 1.41 * height.
In code, we rotate the pseudo-element rectangle and set overflow: Hidden to another rectangle.
.wxml<view class="tooltip"> <view class="tooltip-text"> </view> </view>.wxss
.tooltip {
max-width: 400rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #002FA7;
border-radius: 5rpx;
color: #FFF;
}
.tooltip-triangle {
position: relative;
left: 150rpx;
width: calc(30rpx * 1.41);
height: 30rpx;
overflow: hidden;
}
.tooltip-triangle::before {
content: ' ';
width: 100%;
height: 100%;
background: #002FA7;
display: block;
transform: rotate(-45deg);
transform-origin: left top;
}
Copy the code
Since our triangles are generated from rectangles, the border tooltip method is much easier.
All we need to do is set a border around the fake element.
.wxss
.tooltip {
max-width: 400rpx;
position: relative;
}
.tooltip-text {
padding: 15rpx;
background: #f5f8ff;
color: # 494949;
border-radius: 5rpx;
border: 4rpx solid #002fa7;
}
.tooltip-triangle {
position: relative;
left: 150rpx;
width: calc(30rpx * 1.41);
height: 30rpx;
overflow: hidden;
}
.tooltip-triangle::before {
content: ' ';
border: 4rpx solid #002fa7;
background: #f5f8ff;
width: 100%;
height: 100%;
display: block;
transform: rotate(-45deg);
transform-origin: left top;
box-sizing: border-box;
border-radius: 8rpx;
}
Copy the codeThere is a problem where the border of the top rectangle is exposed.
Here we use trick method, we add a border on top of the original rectangle to cover the border of the upper rectangle.
.wxssAdd the following properties.tooltip-triangle {
border-top: 4rpx solid #f5f8ff;
bottom: 8rpx;
}
Copy the code
In addition, for a triangle with an arc Angle, we only need to set rounded corners on the pseudo-element rectangle.
.wxssAdd the following properties.tooltip-triangle::before
border-radius: 8rpx;
}
Copy the code
clip-path
In the tooltip type below, the triangle extends the background image (the url of the background image may not be fixed).
This is where the clip-path property comes in. We can quickly generate the polygon paths we need in Clippy.
Polygon is to draw a polygon and give the coordinates of each point. Each color in the code corresponds to each point in the image.
So let’s just copy the code up here.
.wxml
<view class="tooltip">
<image src="https://windliangblog.oss-cn-beijing.aliyuncs.com/meituan4.jpg" class="tooltip-text"> .wxss .tooltip { max-width: 400rpx; position: relative; } .tooltip-text { width: 400rpx; height: 200rpx; overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 70% 80%, 63% 100%, 55% 80%, 1% 80%); }Copy the codeWith clip-path, the border and rounded corners are more difficult because the bottom edge is actually truncated.
You can use SVG to achieve the desired effect in Web pages, see one of the answers here.
But in the small program I did not think of a good way, welcome to communicate with me.
The total
It mainly introduces four methods: mapping, border, rectangle rotation and clip-path. In daily development, the border scheme basically meets the needs. If you are lazy, you can also directly find the design essentials. Have you done anything else?