vcl-tooltip

Overlay carrying contextual, non-interactive content.

Usage no npm install needed!

<script type="module">
  import vclTooltip from 'https://cdn.skypack.dev/vcl-tooltip';
</script>

README

VCL tooltip

Overlay carrying contextual, non-interactive content.

Features

Usage

The content of a tooltip can be just text like in the basic example. The arrow pointer is optional and can be placed on any side using a corresponding modifier.

basic example

The content can also be made up of other components.

basic example

Classes

  • vclTooltip

  • vclTooltipContent

  • vclArrowPointer

  • vclArrowPointerBottom

  • vclArrowPointerRight

  • vclArrowPointerLeft

  • vclArrowPointerTop

Modifiers

Variables

  • --tooltip-color
  • --tooltip-bg-color
  • --tooltip-border-color
  • --tooltip-shadow-color

Demo

example.html on GH-pages.