EUAA Design System

Tooltips

A tooltip is a way to show information to the user by hovering over an item. A dashed line underneath the text indicates a tooltip. A tooltip is also available when you have information or help icons.

Left tooltip

<div class="euaa-tooltip euaa-tooltip--left">
    Hover for left tooltip
    <span class="euaa-tooltip__text">This is a tooltip</span>
</div>

Right tooltip

<div class="euaa-tooltip euaa-tooltip--right">
    Hover for right tooltip
    <span class="euaa-tooltip__text">This is a tooltip</span>
</div>

Top tooltip

<div class="euaa-tooltip euaa-tooltip--top">
    Hover for top tooltip
    <span class="euaa-tooltip__text">This is a tooltip</span>
</div>

Bottom tooltip

<div class="euaa-tooltip euaa-tooltip--bottom">
    Hover for bottom tooltip
    <span class="euaa-tooltip__text">This is a tooltip</span>
</div>

Info Icon tooltip

This uses the same setup but it has the fontawesome icon added instead of the text. In this case a new class has to be added .euaa-tooltip--icon

Left Right Top Bottom

<span>Left</span>
    <div class="euaa-tooltip euaa-tooltip--icon euaa-tooltip--left">
        <i class="fas fa-info-circle fa-lg"></i>
        <span class="euaa-tooltip__text">This is an info tooltip</span>
    </div>
    <span class="u-pad-l-xl">Right</span>
    <div class="euaa-tooltip euaa-tooltip--icon euaa-tooltip--right">
        <i class="fas fa-info-circle fa-lg" ></i>
        <span class="euaa-tooltip__text" >This is an info tooltip</span>
    </div>
    <span class="u-pad-l-xl" >Top</span>
    <div class="euaa-tooltip euaa-tooltip--icon euaa-tooltip--top" >
        <i class="fas fa-info-circle fa-lg" ></i>
        <span class="euaa-tooltip__text">This is an info tooltip</span>
    </div>
    <span class="u-pad-l-xl">Bottom</span>
    <div class="euaa-tooltip euaa-tooltip--icon euaa-tooltip--bottom">
        <i class="fas fa-info-circle fa-lg"></i>
        <span class="euaa-tooltip__text">This is an info tooltip</span>
    </div>