Tooltip

This tooltip is a helper component that displays information once you hover over the icon. On mobile the hover is not detected, but instead the user has to click it and the information is shown in a small overlay.

This tooltip extends from the flyout classes. You have multiple modifiers to define the place of the tooltip content. The js-tooltip class will provide the click trigger on mobile instead of the hover event of screens above tablet.

Bottom

px 

			
				<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--bottom">
	<p class="m-tooltip__label">This is a default badge without a value</p>
	<div class="m-tooltip__container">
		<span class="a-badge a-badge--theme-purple m-tooltip__icon">
			?
		</span>
		<div class="m-tooltip__flyout">
			<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
			<div class="m-tooltip__content">
				<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
				<p class="m-tooltip__text">This explains the badge</p>
			</div>
		</div>
	</div>
</div>

Left

px 

			
				<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--left">
	<p class="m-tooltip__label">This is a default badge without a value</p>
	<div class="m-tooltip__container">
		<span class="a-badge a-badge--theme-purple m-tooltip__icon">
			?
		</span>
		<div class="m-tooltip__flyout">
			<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
			<div class="m-tooltip__content">
				<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
				<p class="m-tooltip__text">This explains the badge</p>
			</div>
		</div>
	</div>
</div>

Right

px 

			
				<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--right">
	<p class="m-tooltip__label">This is a default badge without a value</p>
	<div class="m-tooltip__container">
		<span class="a-badge a-badge--theme-purple m-tooltip__icon">
			?
		</span>
		<div class="m-tooltip__flyout">
			<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
			<div class="m-tooltip__content">
				<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
				<p class="m-tooltip__text">This explains the badge</p>
			</div>
		</div>
	</div>
</div>

Top

px 

			
				<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
	<p class="m-tooltip__label">This is a default badge without a value</p>
	<div class="m-tooltip__container">
		<span class="a-badge a-badge--theme-purple m-tooltip__icon">
			?
		</span>
		<div class="m-tooltip__flyout">
			<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
			<div class="m-tooltip__content">
				<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
				<p class="m-tooltip__text">This explains the badge</p>
			</div>
		</div>
	</div>
</div>

With html content

A slightly different variant of the default tooltip, where the <p> with class .m-tooltip__text is replaced by a <div> with the same class, so that it can contain any type of HTML instead of a plain text string.

It can be used in combination with all other tooltip modifiers.

px 

			
				<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--with-html-content m-tooltip--top">
	<p class="m-tooltip__label">This is a default badge without a value</p>
	<div class="m-tooltip__container">
		<span class="a-badge a-badge--theme-purple m-tooltip__icon">
			?
		</span>
		<div class="m-tooltip__flyout">
			<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
			<div class="m-tooltip__content">
				<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
				<div class="m-tooltip__text">
					<h6>Lees onze whitepaper rond “duurzame gewoonten”.</h6>
					<a class="a-link a-link--decorated " href="#">
						<span class="a-link__text">Lees hier onze whitepaper</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

Documentation

Modifiers

  • m-tooltip--top

    Puts the tooltip content at the top of the trigger

  • m-tooltip--left

    Puts the tooltip at the left

  • m-tooltip--right

    Puts the tooltip on the right

  • m-tooltip--bottom

    Puts the tooltip on the bottom

  • m-tooltip--with-html-content

    A wider variant with different paddings, for tooltips that contain formatted HTML instead of plain text

JavaScript

  • js-tooltip

    This will provide the expected behaviour on mobile