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 components: 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 further details about components with out cluttering the web page.

5

    </div>

6

  </div>

Displaying the tooltip will probably be dealt with by CSS solely and is pretty simple. We’ll model 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 are able to 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

  prime: 0;

26

  left: 0;

27

  opacity: 0;

28

  pointer-events: none

29

}

30

31

.tooltip-area:hover #tooltip {

32

  opacity: 1;

33

}

An vital factor to notice with our implementation is that because the tooltip will probably be following the place of the cursor, we’ll have to position it completely positioned to the physique component and never the mother or father container.

Right here’s what we’ve to date:

Now we have set our tooltip component to show on hover, we are able to 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.model.prime = `${occasion.clientY}px`;

3

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

4

};

We are able to additionally embrace a situation to enhance the tooltip’s responsiveness and guarantee it doesn’t go outdoors the web page boundaries. We are able to do that by making certain 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.model.prime = `${occasion.clientY}px`;

4

  }

5

6

  tooltip.model.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 cut back to suit the web page width.

Now we’ve created our place operate, we are able to use the onpointermove occasion listener to find out when the tooltip place needs to 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!