How to use mouseover

Question

How to use mouseover

Closed this issue a year ago · 3 comments

I have been trying to use the mouseover event on objects in the scene. Could you please provide me with some example for the same?

When I used mouseover event, it is not working for me.

Answer 1 · 2023-07-04T19:30:53.000Z

Hi, these are the 'droids you're looking for:

Answer 2 · 2023-07-04T20:17:19.000Z

Thanks for the response. Can you also help me if is it possible to add some tooltip on hover any object in the viewer?

Answer 3 · 2023-07-04T20:22:42.000Z

Maybe something like this simple example from ChatGPT can give a clue - just adapt those handlers to the CameraControl events:

<!DOCTYPE html>
<html>
<head>
  <style>
    #tooltip {
      position: absolute;
      background-color: #333;
      color: #fff;
      padding: 5px;
      visibility: hidden;
    }
  </style>
</head>
<body>
  <h1>Hover over me</h1>

  <div id="tooltip">Tooltip Text</div>

  <script>
    const tooltip = document.getElementById('tooltip');
    const element = document.querySelector('h1');
    const tooltipTexts = ['Tooltip Text 1', 'Tooltip Text 2', 'Tooltip Text 3'];

    element.addEventListener('mouseover', () => {
      const randomIndex = Math.floor(Math.random() * tooltipTexts.length);
      tooltip.textContent = tooltipTexts[randomIndex];
      tooltip.style.visibility = 'visible';
    });

    element.addEventListener('mouseout', () => {
      tooltip.style.visibility = 'hidden';
    });
  </script>
</body>
</html>