Tooltip componentAvailable since EcoComposer 2.2

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



The defaults 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%)
  )
)

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>
^