A way to display small text below an icon with onMouseOver

Question

I'm using react and I want to make a onMouseOver in order to display a small text

onMouseOver={(e) => { alert('Set to started'); }}

I've tried this action but it makes a HTML alert on top. I just want a small text.

I cant seem to find something that displays it

Answer 1

alert is a function of window object. Its default behavior is to show a modal that prevent the user from accessing the rest of the program's interface until the dialog box is closed. You can read more here: Window: alert() method.

To achieve what you desire, you should create an element, like a div or a p and set style display: none or display: block for it, depending on a state, for example [error, setError] = useState('').

By the way, with this approach, remember to implement onMouseLeave along with onMouseOver, because the state would not automatically reverts to its origin value.

Here's a working example for you. Hope it helps.

import { useState } from 'react'

export default function Test() {
  const [error, setError] = useState('')

  return (
    <div>
      <h1
        onMouseOver={() => setError('[Your error message here]')}
        onMouseLeave={() => setError('')}
      >
        Hover me!
      </h1>
      <h4 style={{
        color: 'red',
        display: error === '' ? 'none' : 'block'
      }}>
        {error}
      </h4>
    </div>
  )
}