showcar-ui/src/06-components/atoms/tooltip/docs/tooltip.md

Showcar-ui is the pattern library that is used to build the frontend of AutoScout24. It provides CSS classes, custom elements and components.

<h2>Tooltip<span class="status approved">Approved</span><span class="status js">JS</span></h2>
<style>
#tooltip-2 .sample{
	padding-top:60px;
}
#tooltip-show, #tooltip-hide {
    cursor: pointer;
    font-weight: 900;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
  
    var shower = document.querySelector('#tooltip-show');
    var hider = document.querySelector('#tooltip-hide');
    shower.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('show-tooltip-event')); }, false);
    hider.addEventListener('click', () => { document.dispatchEvent(new CustomEvent('hide-tooltip-event')); }, false);

    setTimeout(() => document.dispatchEvent(new CustomEvent('show-detailed-tooltip')), 1000);
    var closeDetailedTooltipButton = document.querySelector('#close-detailed-tooltip-button');    closeDetailedTooltipButton.addEventListener('click', () => {
      document.dispatchEvent(new CustomEvent('hide-detailed-tooltip'));
    }, false);
  })
</script>