Tooltip componentAvailable since EcoComposer 2.2

Tooltip examples
Default SCSS values
SCSS implementation
HTML implementation

⚠ Not fully functional on Firefox. Works on Chrome. To test on Safari.

The default values are :

border-radius : 5px,
gap : 5px,
padding : 3px 7px,
tooltip--background-image : 'tooltip--background-image',
tooltip--border : 'tooltip--border',
tooltip--color : 'tooltip--color',
tooltip--text-shadow : 'tooltip--text-shadow',
font-size : 1em,
font-weight : 400,
print : false,
suffix : '',
themes :  (
  light : (
    default--tooltip--background-image : linear-gradient(#c6d8df 0%, #bedce8 45%, #c6d8df 100%),
    default--tooltip--border : 2px groove rgba(128, 128, 128, 0.1),
    default--tooltip--color : #000,
    default--tooltip--text-shadow : 1px 1px rgba(221, 255, 254, 0.78)
  ),
  dark : (
    default--tooltip--background-image : linear-gradient(#3e5e6a, #517a8a),
    default--tooltip--border : 2px groove rgba(128, 128, 128, 0.1),
    default--tooltip--color : #ddd,
    default--tooltip--text-shadow : 1px 1px rgb(25 37 42 / 78%)
  )
)</pre><?php
endblock();

We can implement it that way :

@include tooltip.init;
@include tooltip.create;
@include tooltip.create(
  (
    'padding' : 3px 7px,
    'themes' : $themes,
    'tooltip--background-image' : 'my-tooltip--background-image',
  )
);

We can implement it that way :

<button type=button class="ripple tooltip tttl" data-tooltip="Tooltip on the top left">
  On the top left
</button>