preface

Tooltips are often referred to as prompt boxes (or information prompt boxes). A prompt box can provide the user with corresponding prompt information with strong interactivity and freedom. Today we’re not going to talk about how to achieve powerful interactions, but how best to recreate them visually and apply them to different scenarios.

background

The above image is a screenshot of the UI effects encountered in the normal work scene. The Tooltips box shown above basically overlays the common UI style. To summarize briefly:

  • A prompt box with a border
  • Solid color (or transparent solid color) prompt box
  • Prompt box with inner shadow (or outer shadow)
  • Prompt box with border + gradient
  • Prompt box with border + transparency background
  • Tip Box Triangle Indicates the tip box with rounded corners and shadows

There may be another UI style for the prompt that I haven’t touched. With so many UI styles, front-end implementation can be challenging, especially when multiple effects are combined. For example, with a border + inner and outer shadow + gradient (or transparency) + rounded triangle, etc. Basically combines the various UI styles mentioned above.

Clip – path scheme

The above image is usually implemented by using CSS to draw sharp corners and stitching them together. A good solution is as follows:

Let’s briefly introduce the clip-path solution:

The prompt box is divided into two parts, one is a square, the other is a triangle, and then the two are joined together to form a prompt box. So the whole coordinate diagram is as follows:

Assuming that the size of the prompt box is W x h and the border thickness is H1, the following coordinate points are needed to draw the box with the notch:

` `

  • d1coordinates(0, 0)
  • d2coordinates((50% - b), 0)or((w / 2 - b), 0)Among thembIt’s half the length of the opposite side of the triangle, which we’ll talk about later
  • d3coordinates((50% - b - h1), h1) 或 ((w / 2 - b - h1), h1)
  • d4coordinates((50% + b + h1), h1) 或 ((w / 2 + b + h1), h1)
  • d5coordinates((50% + b), 0)or((w / 2 + b), 0)
  • d6coordinates(100%, 0) 或 (w, 0)
  • d7coordinates(100%, 100%) 或 (w, h)
  • d8coordinates(0, 100%) 或 (0, h)

` `

The coordinate points are placed in the clip-path’s polygon() function, and the final cut looks like this

clip-path: polygon( 0 0, calc(50% - 4px) 0, calc(50% - 7px) 2px, calc(50% + 7px) 2px, calc(50% + 4px) 0, 100% 0, 100% 100%, 0 100%, 0, 0);Copy the code

The other thing is the triangle part, if our triangle is a 10px x 10px and we rotate it 45deg. The diagonal length of a square can be calculated by using some trigonometric formulas and the known side lengths of the square:

The clip-path solution encountered problems

This effect looks good on the whole, but if you look closely, you will find that there may be gaps and overlaps at the seams, as shown in the picture below:

This kind of pixel mismatch is quite common with vw schemes, and the first Tooltips have to be gradient left to right for the background, so it takes more effort to match the gradient in the sharp corners.

Having previously encountered this type of ToolTip style problem, the thoughtful visual student modified a version of the ToolTip box with a solid color without transparency, but the visual effect was greatly reduced.

In fact, the original CSS clip-path solution also has a lot of drawbacks. It has the disadvantages of high implementation cost and general effect in the face of shadow, transparent background or gradient, and border.

SVG scheme

During the discussion, we thought that THE PATH of SVG and the style of the prompt box naturally match (it is recommended to check the relevant documents of path first), and after reviewing the relevant documents and materials, we got the following advantages of using SVG:

  • It can easily accommodate shadows, background transparency or gradients, bezels, and even more complex scenes
  • SVGpathThe implementation is simple and the amount of code is minimal
  • Scalability, maintainability

After referring to relevant articles, we improve the Demo tools as follows:

Using the Demo tool, we will get the following data for path:

M 0,0 l-15,-15 h-79 q-84, -15-84,-20 v-85 q-84,-90-79,-90 H 61 Q 66,-90 66,-85 v-20 Q 66,-15 61,-15 H 15 zCopy the code

The following commands are commonly used to draw paths in SVG:

Bessel curve

I personally think the most essential part of the SVG Path command is the Bezier curve, which can draw all kinds of pleasing curves.

The shape of a Bessel curve is completely determined by its control points. N control points correspond to a Bessel curve of order N-1, and can be plotted recursively. ** Let’s see how the next and quadratic Bezier curves are drawn:

First order curve:

On a line, the coordinate formula of the point on the red segment with time t should be as follows:

Quadratic Bezier curve:

P0, P1 and P2 are three non-collinear points, which are successively connected by line segments. In this case, a point p0′ on line segment P0P1 is arbitrarily selected, as shown in the figure above: Our p0 “is at 0.26 of p0P1 (t=0.26). At this moment, p0” and P1 “are connected to form line segment P0” p1 “, and p0 “” is evaluated according to the above comparison column. At this moment, a point of the quadratic Bezier curve is determined.

After some excellent derivation, the quadratic Bezier curve formula is:

N-order Bezier can be considered as the iterative process of the above method. The change process of the curve of 1st ~ 4th order with time T can be intuitively felt through the figure below. For the specific formula of n-order Bezier curve, please refer to the following article on curves

Q command in SVG

Back to our topic of ToolTips, rounded corners can be implemented using quadratic Bezier curves. In SVG, the Q command is used to implement quadratic Bezier curves. Here is an example of the Q command in SVG:

The corresponding instruction, where x1,y1 is the point P1 we mentioned above:

Q x1 y1, x y
Copy the code

The quadratic Bezier curve Q is shown as follows:

< SVG width = "190 px" height = "160 px" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < path d = "M10 80 Q 95 10, 180, 80" stroke="black" fill="transparent"/></svg>Copy the code

By setting the starting point and adjusting the control point P1, we can get the desired rounded corners, as shown in the figure below. The small circle is our control point P1

The style is set

With the SVG at the top, the opacity, background gradient, shadow, and border Settings are not a problem.

The background transparent

Path {fill: rgba(0,0,0,.3); storke: #ffffff; storke-width: 1px}Copy the code

shadow

SVG {filter: drop-shadow(2px 4px 6px black)}Copy the code

For more information on why drop shadow is used, see the difference between box shadow and drop shadow.

When using the box-shadow, we have no shadow on the sharp corners and shadow on the bubble box, as shown in the following picture. Using the drop-shadow, we can meet the requirement that both the sharp corners and the bubble box have shadow.

Background gradient

SVG supports not only simple padding, but also linear and radial tween and graphic textures. In order for a gradient to be reused, the gradient content needs to be defined inside the label.

Here is an example of radial gradient:

The < SVG width = "120" height = "240" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" > < defs > < that linearGradient id = "Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> </defs> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg>Copy the code

After applying this gradient to our prompt box, you can see the image below, and finally don’t have to deal with the sharp gradient convergence problem.

More and more

SVG also supports texture overlay effects, which you can explore on your own.

The demand is not over

Perhaps we inadvertently touched the designer when we applied the above solution to the project, and in the recent requirements visuals we found that the Tooltips style involved has become even more impressive. Here are two simple examples:

We have produced an SDK for ToolTips, which we use as a single parameter arrowHeight passed in to generate sharp corners. It is impossible to cope with the above two styles, sharp style is changeable, how to expand and ease of use has become a problem, it is impossible to change the sharp style of the development of an SDK.

Plan to improve

To cope with the variable bubble Angle, we must find a way to pull the sharp Angle out of the original bubble outer path, generating the sharp Angle path and then integrated into the bubble to form a complete closed path.

To simplify the processing of the values, I changed the original definition of the sharp Angle (0,0) coordinate to the lower graph point:

**(-arrowWidth,0)** (-arrowwidth,0)** (M 0 0 C -10 0-8 5-12 5 S -14 0-24 0)

By designing different angular paths we can combine different bubble patterns:

The angular bubble on the upper right gives the following path string: Q-2 7-9 10 Q-6 5-7 0 is our angular path:

M 0 0 q-2 7-9 10 q-6 5-7 0h-110q-116, 0-116, -6v-56q-116, -62-110, -62h 101Q 107,-62 107, -56v-6q 107,0 101,0H 0 z As you can see from the short path above, our angular path is fully integrated into the entire SVG bubble path, so we don't have to worry about the clip-path solution of CSS.Copy the code

Visualization tool

The solution looks as if it has addressed the angular pattern in the requirement, but you might say how does this angular path come about, and does it take a lot of math to figure it out? Three besser curves are hard to look at, let alone four, five…

So want to cooperate with the visual tools to achieve this we must output path generation process, benefit from the D3. Js tool library operation the powerful function of SVG, we develop generation tools address (market.m.taobao.com/app/fdilab/…). As follows:

For those familiar with SVG’s PATH command, this is easy. If not, read the reference article below to learn about the curve command and draw a smooth curve.

conclusion

At this point in the ToolTips section of the basic design needs have been met, but also the SVG path generation tool. Using SVG to implement ToolTips can cover several scenarios that THE CSS Clip-path does not perfectly address. Thank you very much for your guidance.

Refer to the article

  • D3 website (d3js.org.cn/)

  • Bessel curve (zhuanlan.zhihu.com/p/136647181) curve article:

  • Tooltips using SVG Path (medium.com/welldone-so…).

  • SVG gradient (developer.mozilla.org/zh-CN/docs/…).

  • Depth control of SVG path path Bessel curve instruction (www.zhangxinxu.com/wordpress/2)…

  • CSS drop – shadow (www.zhangxinxu.com/wordpress/2.)