tooltips.tooltips.basicTooltip.title

쉬움

tooltips.tooltips.basicTooltip.description

#hover#css-only#micro

라이브 데모

코드

BasicTooltip.tsx

export const BasicTooltip = () => {
  const [showTooltip, setShowTooltip] = useState(false);
  return (
    <div className="basic-tooltip-container">
      <button
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        Hover me
      </button>
      {showTooltip && <div className="basic-tooltip">This is a tooltip!</div>}
    </div>
  );
};

tooltips.css

.basic-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  animation: tooltip-fade-in 0.2s ease;
}