🍷 Digital Wine Cellar – Pattern Library

Tooltip 

<p>A sample text with a <em data-tippy-content="This is a really neat tooltip!">tooltip</em> sample.
 
<p>A sample text with a <em data-tippy-content="This is a really neat tooltip!">tooltip</em> sample.
 
/* No context defined. */
  • Content: 
    /**
 * Tooltip
 */

@media screen {

  em[data-tippy-content] {
    font-style: normal;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    cursor: help;
  }

  /* Margin reset */
  .tippy-popper * + * {
    margin-top: unset;
  }
}
  • URL: /components/raw/tooltip/tooltip.css
  • Filesystem Path: components/02_molecules/tooltip/tooltip.css
  • Size: 257 Bytes
  • Content: 
    /**
 * Tooltip config
 *
 * @requires Tippy.js
 */

/* global tippy */

tippy('[data-tippy-content]', {
  arrow: true,
});
  • URL: /components/raw/tooltip/tooltip.js
  • Filesystem Path: components/02_molecules/tooltip/tooltip.js
  • Size: 123 Bytes

Tooltip

Uses a 3rd party library called Tippy.js.

See library documentation for how to configure it.