svelte-tooltipify

This minimal project is to implement a tooltip Svelte component with following Specs

Specs

• On a client without a mouse, the tooltip should be activated on tap only, it can be deactivated on scroll or tapping outside of the tooltip
• On a client with a mouse, the tooltip should be activated onMouseOver and deactivated onMouseLeave, also it should deactivate on scroll and resize
• Should support detecting the bounds, e.g. if the tooltip is displayed on left, the tail should correspond to it, see example below. A good idea to demo it displaying in corners and top, right, bottom, left bounds.
• It should also auto detect and place the tooltip on different directions depending on the content if it fits. E.g. if there is not enough space at the top of the page, tooltip should appear below the content.

Checklist

• Init Svelte project with minimal setup (not using boilerplates or generators).
• It should be re-usable as much as possible, i.e. a tooltip can be attached to anything
• Keep the code clean, concise, elegant, robust and efficient as possible
• Add animations and/or transitions when the tooltip appears and disappear
• Make use of advanced sass/scss features

Extra Checklist

• Added Jest and testing-library with a simple test.
• Integrated ESLint and Prettier.
• Use core-js to build to vanillajs with polyfill to support older browsers such as IE11 and iOS Safari 9+
• Pre-configurate VSCode settings to help install essential extensions
• Pre-configurate VSCode settings to auto format / auto fix based on eslint and prettier rules.
• Deployed live demo to netlify (see below)

Demo

TRY LIVE DEMO: https://svelte-tooltipify.netlify.app

OR Watch video