Tooltip

The tooltip component is used to hide and show a small part of extra information/content hidden behind an icon. It consists of an icon and a content section. By adding the class js-tooltip, the javascript of the brandplatform is initialised. On desktop the tooltip behaves on hover and on mobile its active state is toggled.

Default

This is some extra information.


    
      

  

  <div class="m-tooltip js-tooltip ">
    <span class="m-tooltip__icon icon-info"></span>

    <div class="m-tooltip__content">
      <p class="m-tooltip__text">
        This is some extra information.
      </p>
    </div>
  </div>




    

  

Down

This is some extra information.


    
      

  

  <div class="m-tooltip js-tooltip m-tooltip--down">
    <span class="m-tooltip__icon icon-info"></span>

    <div class="m-tooltip__content">
      <p class="m-tooltip__text">
        This is some extra information.
      </p>
    </div>
  </div>




    

  

Left

This is some extra information.


    
      

  

  <div class="m-tooltip js-tooltip m-tooltip--left">
    <span class="m-tooltip__icon icon-info"></span>

    <div class="m-tooltip__content">
      <p class="m-tooltip__text">
        This is some extra information.
      </p>
    </div>
  </div>




    

  

Right

This is some extra information.


    
      

  

  <div class="m-tooltip js-tooltip m-tooltip--right">
    <span class="m-tooltip__icon icon-info"></span>

    <div class="m-tooltip__content">
      <p class="m-tooltip__text">
        This is some extra information.
      </p>
    </div>
  </div>




    

  

Modifiers

  • m-tooltip--down

    This class will place the tooltip-content below the icon when hovering.

  • m-tooltip--right

    This class will place the tooltip-content on the right of the icon when hovering.

  • m-tooltip--left

    This class will place the tooltip-content on the left of the icon when hovering.

States

  • is-active

    This class enables/disables the content part of the tooltip once the icon is clicked.