Front W - Pattern Library

Tooltip: Right 

<div class="tooltip tooltip--right tooltip--align-center">
    <button aria-describedby="tooltip-id" class="tooltip__label">
        Tooltip
    </button>
    <div role="tooltip" id="tooltip-id" class="tooltip__content">Tooltip description</div>
</div>
 
<div class="tooltip tooltip--{{position}} tooltip--align-{{ alignment }}">
  <button aria-describedby="{{ id }}" class="tooltip__label">
    {{ text }}
  </button>
  <div role="tooltip" id="{{ id }}" class="tooltip__content">{{ description|raw }}</div>
</div>
 
{
  "text": "Tooltip",
  "description": "Tooltip description",
  "id": "tooltip-id",
  "position": "right",
  "alignment": "center"
}