User Manual
Menu
Close
User Manual

Tooltip

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.

Default

A simple and default version of a tooltip.

Content tooltip
Een zachte kaft valt enkel te combineren met een Large of Medium fotoboek

      
        
      

  
	<div class="m-tooltip m-tooltip--bottom">
		<span class="m-tooltip__text">Content tooltip</span>
	</div>



    
      

      
    

Inside-button

A simple and default version of a tooltip.

buttonText
Content 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>

    
      

      
    

My-account

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>



    
      

      
    

Shoppingcart-empty

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>



    
      

      
    

Shoppingcart

This tooltip is used for the header.

Winkelmandje
Totaalprijs
Fotokader groot
€16.00
Stuks:1
Fotokader
€14.00
Stuks:1
Fotokader klein
€12.00
Stuks:1
Verzendkosten
€4.95
Opties
€18.00
Totaalprijs
€46.95
BTW inbegrepen

      
        
      

  
	<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 a title

this is usage documentation is written in markdown