<

div data-content-block-type=”Wysi” id=”ilgh”>

Aqui está o produto final:

1. Criando a marcação HTML

Nossa marcação requer dois elementos: o elemento de dica de ferramenta e a área de dica de ferramenta usada para acionar a exibição da dica de ferramenta.

1

   class="tooltip-area">

2

    
What is a tooltip?

3

     id="tooltip" role="tooltip">

4

      Hi! I'm a tooltip. I provide additional information about elements without cluttering the page.

5

6

A exibição da dica de ferramenta será tratada apenas pelo CSS e é bastante direta. Iremos estilizar a dica de ferramenta para que fique oculta por padrão e seja exibida apenas quando a área de dica de ferramenta passar o mouse.

1

#tooltip {

2

  opacity: 0;

3

}

4

5

.tooltip-area:hover #tooltip {

6

  opacity: 1;

7

}

Este é todo o estilo necessário para lidar com a exibição da dica de ferramenta. Podemos adicionar mais CSS para fins de design.

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

  display: flex;

10

  align-items: center;

11

  justify-content: center;

12

  background-color: white;

13

}

14

15

.tooltip-area h1 {

16

  text-align: center;

17

}

18

19

#tooltip {

20

  position: absolute;

21

  height: fit-content;

22

  max-width: 250px;

23

  padding: 12px;

24

  background-color: #FFFAA0;

25

  top: 0;

26

  left: 0;

27

  opacity: 0;

28

  pointer-events: none

29

}

30

31

.tooltip-area:hover #tooltip {

32

  opacity: 1;

33

}

Uma coisa importante a observar com nossa implementação é que, como a dica de ferramenta seguirá a posição do cursor, teremos que colocá-la absolutamente posicionada no elemento do corpo e não no contêiner pai.

Aqui está o que temos até agora:

Agora que definimos nosso elemento de dica de ferramenta para exibição ao passar o mouse, podemos usar JavaScript para atualizar a posição da dica de ferramenta. Dessa forma, nossa dica de ferramenta se moverá para onde o cursor do mouse for.

Atribuiremos a posição para nossa dica de ferramenta usando os eventos de mouse clientX e clientY.

Vamos criar uma função que lide com a atualização da posição da dica de ferramenta do CSS. Primeiro, obteremos o elemento tooltip:

1

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

E então atualizamos sua posição no updateTooltipPosition() função

1

const updateTooltipPosition = (event) => {

2

  tooltip.style.top = `${event.clientY}px`;

3

  tooltip.style.left = `${event.clientX}px`;

4

};

Também podemos incluir uma condição para melhorar a capacidade de resposta da dica de ferramenta e garantir que ela não ultrapasse os limites da página. Podemos fazer isso garantindo que o valor superior seja atualizado apenas se a altura da dica de ferramenta mais a posição vertical do cursor for menor que a altura da janela:

1

const updateTooltipPosition = (event) => {

2

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

3

    tooltip.style.top = `${event.clientY}px`;

4

  }

5

6

  tooltip.style.left = `${event.clientX}px`;

7

};

Graças ao nosso estilo, não precisamos nos preocupar em verificar o limite esquerdo, pois a largura da dica de ferramenta será reduzida automaticamente para caber na largura da página.

Agora que criamos nossa função de posição, podemos usar o ouvinte de evento onpointermove para determinar quando a posição da dica de ferramenta deve ser atualizada.

Atualizaremos nosso HTML para anexar nossa função ao ouvinte de evento, embutido em nosso elemento de área de dica de ferramenta:

1

   class="tooltip-area" onpointermove="updateTooltipPosition(event)">

Conclusão

E é isso. Criamos uma dica de ferramenta CSS vinculada ao mouse usando um pouco de JavaScript para ajudar!