tooltip

The tooltip can be used to show additional information in context. There are several variants to indicate the severity and importance of some tooltips like error, warning, success and the default one.

It is also possible to define the width of these tooltips. It can be either be either dynamic or fixed. Just have a look at the next examples and hover with your mouse over the text.

Please note that you need to define when and where a tooltip is visible – see the examples at the end of this page for a no-JS solution for this. For a more involved example, take a look at the Slider component

According to the Web Content Accessibility Guidelines (WCAG), it is highly recommended to set an aria-hidden, an ID and an aria-describedby to the Tooltip.

table of content

description
component variations
style scss

component variations

Open on blank page

<span class="a-tooltip -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span class="a-tooltip -dynamic-width -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span class="a-tooltip -fixed-width -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span class="a-tooltip a-tooltip--success -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--success -dynamic-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--success -fixed-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span class="a-tooltip a-tooltip--error -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--error -dynamic-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--error -fixed-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span class="a-tooltip a-tooltip--warning -floating-shadow-s" role="tooltip">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--warning -dynamic-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

Open on blank page

<span
  class="a-tooltip a-tooltip--warning -fixed-width -floating-shadow-s"
  role="tooltip"
>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.
</span>

If you do not want to deal with JavaScript, here are some examples for using a hover tooltip without any JS involved. Tweak the top and bottom values to your needs!

Please ensure that this approach satisfies your accessibility requirements first.

Open on blank page

<div class="frontend-kit-example__hovering-tooltip" data-tooltip="Hello there!">
  Hover me!
</div>
<div
  class="frontend-kit-example__hovering-tooltip"
  data-tooltip="Hello there! This text is too long for the default width."
  data-tooltip-width="fixed"
>
  Hover me! (fixed width)
</div>
<div
  class="frontend-kit-example__hovering-tooltip"
  data-tooltip="Hello there! This text is too long for the default width."
  data-tooltip-width="dynamic"
>
  Hover me! (dynamic width)
</div>
<div
  class="frontend-kit-example__hovering-tooltip"
  data-tooltip="Hello there!"
  data-tooltip-type="success"
>
  Hover me! (success variant)
</div>
<div
  class="frontend-kit-example__hovering-tooltip"
  data-tooltip="Hello there!"
  data-tooltip-type="warning"
>
  Hover me! (warning variant)
</div>
<div
  class="frontend-kit-example__hovering-tooltip"
  data-tooltip="Hello there!"
  data-tooltip-type="error"
>
  Hover me! (error variant)
</div>

additional content

styles SCSS

@mixin tooltip--success {
  background-color: var(--floating-minor-signal-success__enabled__fill__default);
  color: var(--floating-minor-signal-success__enabled__front__default);
}

@mixin tooltip--warning {
  background-color: var(--floating-minor-signal-warning__enabled__fill__default);
  color: var(--floating-minor-signal-warning__enabled__front__default);
}

@mixin tooltip--error {
  background-color: var(--floating-minor-signal-error__enabled__fill__default);
  color: var(--floating-minor-signal-error__enabled__front__default);
}

@mixin tooltip--fixed-width {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 10rem;
}

@mixin tooltip--dynamic-width {
  max-width: none;
}

@mixin tooltip {
  display: inline-block;
  z-index: 1;
  max-width: 16rem;
  padding: 0.25rem 0.75rem;
  color: var(--floating-color);
  background-color: var(--floating-background);

  &.a-tooltip--success {

    @include tooltip--success;
  }

  &.a-tooltip--warning {

    @include tooltip--warning;
  }

  &.a-tooltip--error {

    @include tooltip--error;
  }

  &.a-tooltip.-dynamic-width {

    @include tooltip--dynamic-width;
  }

  &.a-tooltip.-fixed-width {

    @include tooltip--fixed-width;
  }
}


.a-tooltip {

  @include tooltip;
  @include floating-outline;
}

[data-tooltip] {
  position: relative;
}

/* stylelint-disable-next-line a11y/content-property-no-static-value */
[data-tooltip]:hover::before {

  @include tooltip;
  @include box-shadow;

  position: absolute;
  bottom: 100%;
  left: -0.875rem;
  content: attr(data-tooltip);
}

[data-tooltip][data-tooltip-width='fixed']:hover::before {

  @include tooltip--fixed-width;
}

[data-tooltip][data-tooltip-width='dynamic']:hover::before {

  @include tooltip--dynamic-width;
}

[data-tooltip][data-tooltip-type='success']:hover::before {

  @include tooltip--success;
}

[data-tooltip][data-tooltip-type='warning']:hover::before {

  @include tooltip--warning;
}

[data-tooltip][data-tooltip-type='error']:hover::before {

  @include tooltip--error;
}

tooltip

component variations

neutral tooltip

neutral tooltip dynamic width

neutral tooltip fixed width

success tooltip

success tooltip dynamic width

success tooltip fixed width

error tooltip

error tooltip dynamic width

error tooltip fixed width

warning tooltip

warning tooltip dynamic width

warning tooltip fixed width

show tooltip on hover

additional content

styles SCSS