This is the tooltip component. It's used to provide additional information. The element is always positioned absolute, so bear in mind to make the parent relative. The tooltip can be located on the lower half or the upper half of the parent.
A simple and default version of a tooltip.
<div class="m-tooltip m-tooltip--bottom">
<span class="m-tooltip__text">Content tooltip</span>
</div>
A simple and default version of a tooltip.
<div class="u-position-relative">
<a class="a-button a-button--tooltip is-disabled" href="">buttonText</a>
<div class="m-tooltip m-tooltip--bottom m-tooltip--button">
<span class="m-tooltip__text">Content tooltip</span>
</div>
</div>
This tooltip is used for the header.
<div class="m-tooltip m-tooltip--bottom m-tooltip__header m-tooltip__my-account ">
<button class="icon-close"></button>
<div class="m-tooltip__my-account__heading">
<h4><!--text--><span><!--text--></span></h4>
</div>
<ul class="m-tooltip__my-account__list">
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
<li class="m-tooltip__my-account__list-item"><a class="m-tooltip__my-account__link" href="<!--url-->"><!--text--></a></li>
</ul>
</div>
This tooltip is used for the header.
Winkelmandje
Je winkelmandje is leeg.
<div class="m-tooltip m-tooltip--bottom m-tooltip__header ">
<button class="icon-close"></button>
<div class="m-tooltip__content m-tooltip__empty-cart">
<p class="m-tooltip__content__title"><!--text--></p>
<p class="m-tooltip__content__text"><!--text--></p>
</div>
</div>
This tooltip is used for the header.
<div class="m-tooltip m-tooltip--bottom m-tooltip__header ">
<button class="icon-close"></button>
<div class="m-tooltip__content m-tooltip__mini-cart">
<div class="m-tooltip__mini-cart__heading">
<div class="m-tooltip__mini-cart__heading-title"><!--text--></div>
<div class="m-tooltip__mini-cart__heading-text"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product">
<div class="m-tooltip__mini-cart__product-head">
<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product">
<div class="m-tooltip__mini-cart__product-head">
<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product">
<div class="m-tooltip__mini-cart__product-head">
<div class="m-tooltip__mini-cart__product-title"><!--text--></div>
<div class="m-tooltip__mini-cart__product-price"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__product-quantity">Stuks:<!--text--></div>
</div>
<div class="m-tooltip__mini-cart__extra-cost">
<div class="m-tooltip__mini-cart__delivery-cost">
<div class="m-tooltip__mini-cart__delivery-title"><!--text--></div>
<div class="m-tooltip__mini-cart__delivery-price"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__delivery-cost">
<div class="m-tooltip__mini-cart__delivery-title"><!--text--></div>
<div class="m-tooltip__mini-cart__delivery-price"><!--text--></div>
</div>
</div>
<div class="m-tooltip__mini-cart__total">
<div class="m-tooltip__mini-cart__total-title"><!--text--></div>
<div class="m-tooltip__mini-cart__total-price"><!--text--></div>
</div>
<div class="m-tooltip__mini-cart__vat"><!--text--></div>
</div>
<div class="m-tooltip__button-order">
<button class="a-button"><!--text--></button>
</div>
</div>
this is usage documentation is written in markdown