How To Construct a Sticky CSS Tooltip (With a Little bit of JavaScript)

On this tutorial, we’ll construct a CSS tooltip that sticks to our cursor and supplies a extra interactive expertise to customers.

 Right here’s the ultimate product:

1. Creating the HTML Markup

Our markup requires two parts: the tooltip component and the tooltip-area used to set off the show of the tooltip.

1

  <div class="tooltip-area">

2

    <h1>What's a tooltip?</h1>

3

    <div id="tooltip" position="tooltip">

4

      Hello! I am a tooltip. I present extra details about parts with out cluttering the web page.

5

    </div>

6

  </div>

Displaying the tooltip can be dealt with by CSS solely and is pretty easy. We’ll fashion the tooltip to be hidden by default and solely displayed when the tooltip space is hovered over.

1

#tooltip {

2

  opacity: 0;

3

}

4

5

.tooltip-area:hover #tooltip {

6

  opacity: 1;

7

}

That is all of the styling wanted to deal with the show of the tooltip. We will add some extra CSS for design functions.

1

.tooltip-area {

2

  width: 50%;

3

  min-width: max-content;

4

  max-height: 75vh;

5

  max-width: 75vh;

6

  aspect-ratio: 1;

7

  box-sizing: border-box;

8

  padding: 18px 12px;

9

  show: flex;

10

  align-items: heart;

11

  justify-content: heart;

12

  background-color: white;

13

}

14

15

.tooltip-area h1 {

16

  text-align: heart;

17

}

18

19

#tooltip {

20

  place: absolute;

21

  top: fit-content;

22

  max-width: 250px;

23

  padding: 12px;

24

  background-color: #FFFAA0;

25

  high: 0;

26

  left: 0;

27

  opacity: 0;

28

  pointer-events: none

29

}

30

31

.tooltip-area:hover #tooltip {

32

  opacity: 1;

33

}

An necessary factor to notice with our implementation is that for the reason that tooltip can be following the place of the cursor, we’ll have to put it completely positioned to the physique component and never the mother or father container.

Right here’s what we have now to this point:

Now we have set our tooltip component to show on hover, we will use JavaScript to replace the tooltip place. This manner our tooltip will transfer wherever the mouse cursor goes.

We’ll assign the place for our tooltip utilizing the clientX and clientY mouse occasions.

Let’s create a operate that handles updating the CSS tooltip place. First, we’ll get the tooltip component:

1

const tooltip = doc.getElementById("tooltip");

After which we replace its place within the updateTooltipPosition() operate

1

const updateTooltipPosition = (occasion) => {

2

  tooltip.fashion.high = `${occasion.clientY}px`;

3

  tooltip.fashion.left = `${occasion.clientX}px`;

4

};

We will additionally embody a situation to enhance the tooltip’s responsiveness and guarantee it doesn’t go outdoors the web page boundaries. We will do that by guaranteeing that the highest worth is simply up to date if the tooltip top plus vertical cursor place is lower than the window top:

1

const updateTooltipPosition = (occasion) => {

2

  if (tooltip.offsetHeight + occasion.clientY < window.innerHeight) {

3

    tooltip.fashion.high = `${occasion.clientY}px`;

4

  }

5

6

  tooltip.fashion.left = `${occasion.clientX}px`;

7

};

Due to our styling, we don’t want to fret about checking for the left boundary because the tooltip width will routinely scale back to suit the web page width.

Now we’ve created our place operate, we will use the onpointermove occasion listener to find out when the tooltip place must be up to date.

We’ll replace our HTML to connect our operate to the occasion listener, inline on our tooltip space component:

1

  <div class="tooltip-area" onpointermove="updateTooltipPosition(occasion)">

Conclusion

And that is that. We’ve created a mouse-bound CSS tooltip utilizing a little bit of JavaScript to assist!