Designsystem

Tooltip 

<button data-tippy-content="Vous pouvez saisir votre message ci-dessous, un conseiller prime Eco Energie est prêt à y répondre !">Passez votre souris ici</button>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
    tippy('[data-tippy-content]', {
        duration: 100,
        delay: [0, 250],
        allowHTML: true,
        theme: 'grey',
        placement: 'right',
        arrow: true
    });
</script>
 
<button data-tippy-content="{{tooltip}}">Passez votre souris ici</button>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script>
    tippy('[data-tippy-content]', {
        duration: 100,
        delay: [0, 250],
        allowHTML: true,
        theme: 'grey',
        placement: 'right',
        arrow:true
    });
</script>
 
{
  "tooltip": "Vous pouvez saisir votre message ci-dessous, un conseiller prime Eco Energie est prêt à y répondre !"
}
Tippy.js logo

Tippy.js

The complete tooltip, popover, dropdown, and menu solution for the web

npm Downloads per Month MIT License

Demo and Documentation

➡️ View the latest demo & docs here

Migration Guide

Installation

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

Import the tippy constructor and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

The core CSS comes bundled with the default unpkg import.

Usage

For detailed usage information, visit the docs.

Component Wrappers

React: @tippyjs/react

License

MIT