search

flarum / issue-archive

0 stars 0 forks source link

Replace tooltip library with CSS tooltips and helper component #131

Open davwheat opened 3 years ago

davwheat commented 3 years ago

Progress towards flarum/issue-archive#179.

This has been partially implemented. Tooltips now use a <Tooltip> component to allow us to easily swap out the tooltip library in the future.

Is your feature request related to a problem? Please describe. Some discussion has already taken place about this in flarum/issue-archive#179.

Using JS tooltips where not needed isn't a good idea as DOM manipulation takes far more time for devices to handle and paint than just a CSS transform. It also means that we don't need to worry about "creating" the tooltips.

Let's replace JS-based tooltips with better CSS-based tooltips! :tada:

Describe the solution you'd like

My API suggestion for this would be something like this:

<button aria-label="This will delete your forum!" data-tooltip>
  My cool button
</button>

Using CSS's attr(), we can use a pseudoelement to show a tooltip:

// This isn't the full set of styles needed, obviously!
[data-tooltip][aria-label]:not([aria-label=""]) {
  &::before {
    content: attr(aria-label);
  }
}

We should also create a Tooltip helper component which we can wrap content in to provide tooltips when pseudoelements are already used on the element itself.

This is a great starting point for our CSS: https://kazzkiq.github.io/balloon.css/

Justify why this feature belongs in Flarum's core, rather than in a third-party extension We currently use tooltips throughout core.

Describe alternatives you've considered There are MANY JS-based tooltip libraries available, but when things can be done with CSS alone, it's always a better option. CSS parses and paints much faster than JS, and has much better and easier support for animations.

davwheat commented 3 years ago

Extension breaking label has been removed as the Tooltip component should allow us to perform any library changes without any breaking changes.

Small issues may arise where extensions tightly integrate with Bootstrap tooltips (such as some that use tricks to add custom classes to the tooltips) but we can work around this issues.