I recently encountered a requirement to implement a Tooltip requirement in Element’S UI, as shown below:

However, for my actual needs, the system is very high, I modified it on the basis of EL UI, which seems to be much more convenient than my own implementation, so I started to implement one myself.

Decomposition of demand

To break down the requirements, to implement a message prompt box, split the entire Tooltip into two parts:

  • The upper band points to the triangle
  • Next section text box

You can then use positioning to combine the two to fulfill the entire requirement.

implementation

How to implement the entire Tooltip is not the focus of this article, but rather how to implement a triangle with a border, as shown below:

Realization triangle

We all know how to use CSS to create a triangle, mainly using the border property, so you can use the following code to create an isosceles triangle with an arrow pointing up:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .up-arrow {
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }
    </style>
</head>

<body>
    <div class="up-arrow"></div>
</body>

</html>

Copy the code

The realization effect is shown in the figure below:

Implement border effect

Now that I’ve implemented a triangle, how do I implement a triangle with a black box and a white background? Or an arrow? In fact, the idea is also to use triangles, but the superposition of two triangles can form this effect:

That is, I can superimpose a triangle with a white background on a triangle with a black background and make the top value of the white background slightly larger than the top value of the black background, as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .up-arrow {
            position: absolute;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }

        .up-arrow-border {
            position: absolute;
            top: 12px;
            border-left: 8px solid  transparent;
            border-right: 8px solid  transparent;
            border-top: 8px solid  transparent;
            border-bottom: 8px solid white;
        }
    </style>
</head>

<body>
    <div class="up-arrow"></div>
    <div class="up-arrow-border"></div>
</body>

</html>
Copy the code

Now that I have a border effect, I want to move the white background to the right so that both black and white are centered

Align center

Since this effect is usually achieved at the same time, the desired effect can be achieved by wrapping both in a large div and centering them at the same time, as follows:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .up-arrow {
            position: absolute;
            left: 50%;
            transform: translate(-50%.0);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid black;
        }

        .up-arrow-border {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translate(-50%.0);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid transparent;
            border-bottom: 8px solid white;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="up-arrow"></div>
        <div class="up-arrow-border"></div>
    </div>
</body>

</html>

Copy the code

Heh heh, very interesting!