/tooltip-challenge

Primary LanguageJavaScript

Tooltip Implementation

Demo on Netlify

Project overview

  • This solution was implemented using Svelte Actions. A tooltip can be attached to any HTML element;
  • Legacy browser support: IE11+, iOS 10+;
  • Linting with Svelte for VSCode extension (no need to configure eslint, prettier, etc.);
  • Basic accessibility features.
  • Parent element boundary padding fixed in 20px;
  • Adherent to those specs.

How to place a tooltip

  • Import the tooltip action:
  import { tooltip } from "./actions/Tooltip";
  • Define the tooltip text with a title attribute in the desired element;
  • Available tooltip positioning: TOP and BOTTOM;
  • Apply the use:tooltip directive to the base element. A positioning prop can be passed to it with the format { position: "TOP" } or { position: "BOTTOM" }. If no prop is passed, the fallback is TOP.