How to implement hint when hovering over a block?

Question

JavaScript

There is a react component like this:

<CM.UI.Flexbox.Box className='message-wrapper' column>
           <CM.UI.Flexbox.Item flex='0 1 auto'>
             {model.get('message')}
           </CM.UI.Flexbox.Item>
           <CM.UI.Flexbox.Item flex='0 1 auto' style={{opacity: '0.7'}}>
             {modelSensor ? `${CM.gettext('Name')}: ${modelSensor.get('description')}` : null}
           </CM.UI.Flexbox.Item>
           <CM.UI.Flexbox.Item flex='0 1 auto' style={{opacity: '0.7'}}>
             {modelSensor && modelSensor.get('location') ? `${CM.gettext('Address')}: ${modelSensor.get('location')}` : null}
           </CM.UI.Flexbox.Item>
           <CM.UI.Flexbox.Item flex='0 1 auto' style={{opacity: '0.5'}}>
             {timeFromNow}
           </CM.UI.Flexbox.Item>
</CM.UI.Flexbox.Box>

Which looks like this:
How to make it so that when you hover over this block, a tooltip in the form of a name and address pops up?

Answer 1

import React, { useState, useCallback } from 'react';
import { Icon, Hint } from '../some-place';

const Example = () => {
  const [shouldShowHint, setShouldShowHint] = useState(false);

  const onMouseEnter = () => useCallback({
    setShouldShowHint(true);
  }, []);
  
  const onMouseLeave = useCallback(() => {
    setShouldShowHint(false);
  }, []);

  return (
    <div
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <Icon />
      {shouldShowHint && <Hint />}
    </div>
  );
};