Studio Web
Switch Design System theme
Betclic / Clickbet
Shortcut : MAJ + T
Switch theme mode
Light / Dark
Shortcut : MAJ + D
Tooltip
When used, tooltips reveal a text label that helps the user understand an element's identity and the functionality it offers. Tooltips can be interactive, simply with a close button. Their messages are designed to be explanatory in the most concise way possible.
TWIG : Universes/_common/_twig/_components/_tooltip.twig
CSS : DesignSystem/_tactics/_components/_css/_common/_tooltip/_tooltip.scss
DesignSystem/_tactics/_components/_css/_common/_tooltip/_tls.scss
JS : Universes/_common/_js/_tooltips.js
Without parent restrictor
Display on hover
Default
Est culpa id ullamco irure fugiat anim.
To the right (force direction)
Est culpa id ullamco irure fugiat anim.
Up (force direction)
Est culpa id ullamco irure fugiat anim.
To the left (force direction)
Est culpa id ullamco irure fugiat anim.
With button
Est culpa id ullamco irure fugiat anim.
Display on load
Default
Lorem ipsum
To the right (force direction)
Lorem ipsum
Up (force direction)
Lorem ipsum
To the left (force direction)
Lorem ipsum
With button
Lorem ipsum
With parent restrictor
Display on load
Labore mollit cupidatat velit reprehenderit do amet fugiat. Do commodo commodo commodo amet aliquip.
Labore mollit cupidatat velit reprehenderit do amet fugiat. Do commodo commodo commodo amet aliquip. Irure minim consequat nulla ea amet eu excepteur deserunt. Cillum ea reprehenderit tempor velit consequat eu. Commodo nostrud id magna qui qui aliqua sint non ea mollit.
Labore mollit cupidatat velit reprehenderit do amet fugiat. Do commodo commodo commodo amet aliquip.
Labore mollit cupidatat velit reprehenderit do amet fugiat. Do commodo commodo commodo amet aliquip. Irure minim consequat nulla ea amet eu excepteur deserunt. Cillum ea reprehenderit tempor velit consequat eu. Commodo nostrud id magna qui qui aliqua sint non ea mollit.
Special
Claim (Sport/Turf/Casino)
Félicitations ! Bonus débloqué
Timeline (Turf)
Light shadow on tooltip