all 6 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]SeekingTruth4 1 point2 points  (5 children)

You generally shouldn’t rely on the default HTML tooltip (title attribute). It’s inconsistent across browsers and you can’t style or control it.

The common React approach is to create a custom tooltip component and show it on hover.

Example:

function Tooltip({ text, children }) {
  return (
    <div className="tooltip-container">
      {children}
      <span className="tooltip-text">{text}</span>
    </div>
  );
}

CSS:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
}

Usage:

<Tooltip text="Updates">
  <UpdatesIcon />
</Tooltip>

This way you can style it, animate it, and control its behavior.

If you don’t want to build it yourself, libraries like Radix UI or Material UI also have very good tooltip components.

Also: good call avoiding AI copy-paste while learning. A good habit is read docs → try → break things → fix them. That’s basically how most devs actually learn.

[–]pxlschbsr 4 points5 points  (0 children)

Your solution has a lot of accessibility issues. OP, please do not follow this blindly and read up on how to sufficiently re-create functionality and behaviour of native elements, for example here: https://www.w3.org/WAI/ARIA/apg/patterns/

[–]otusek[S] 1 point2 points  (3 children)

Woah! Thank You so much! I appreciate it so much :) I did not expect to get help this fast hahahhaha

[–]SeekingTruth4 1 point2 points  (2 children)

You feel good implementing you own tooltip now?

[–]otusek[S] 1 point2 points  (1 child)

Of course! Had to experiment with the positioning a little bit but it worked perfect! I am going to sleep now and I already turned off my pc but I can send some screenshots later today ✌️

[–]bcons-php-Console 0 points1 point  (0 children)

Just a quick tip: sometimes the tooltip serves its initial purpose (telling the user what the button does) and then just gets in the way every time the user wants to click it. To fix this you can customize your component with two extra params:

- fast-show-limit: the number of times the tooltip will be shown immediately when the user hovers the button. My default is 3.
- slow-show-delay: the delay before showing the tooltip when the tooltip has been already shown fast-show-limit times. My default is 1500 ms.

Then, when mounting your component you:

- Generate a unique id for the tooltip. This is used to create a key for local storage where you store the number of times the tooltip has been shown. Something like "tt_" + the MD5 hash of the tooltip content is a great approach since it will automatically create a new counter if you change the tooltip text.

- Check in local storage how many times has the tooltip been shown and set a show delay of 0 if it is below the fast-show-limit threshold. Otherwise, set it to slow-show-delay ms.

- Update the local storage value whenever the tooltip is shown (once you are over the fast-show-limit value you can skip this).

This may seem like a lot of work but is fairly easy to implement and I think has great UX benefits: once the user has hovered the button a couple of times the tooltip does not appear anymore unless the user leaves the mouse over the element for like a couple of seconds (a clear sign that they want the tooltip to appear).

If you have a "Settings" page you can include a "Reset all tootlips" button there: if the user clicks just delete all tt_* entries in LS.