Как реализовать hint при наведении на блок?

Question

[Neuro]

Есть реакт компонент такого типа:

<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>

Который выглядит так:
Как сделать так, чтобы при наведении на этот блок всплывала подсказка в виде имени и адреса?

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>
  );
};