Flyout

A flyout is pop-up menu that branches off another visual element. Flyouts are used as elements that reveal "on hover" or "on tap" (mobile) content.

Default

dit is een tooltip met extra info, deze verschijnt enkel on hover & click


			
				<div class="c-flyout js-flyout ">
	<div class="c-flyout__trigger ">
		<span class='fas fa-info-circle'></span>
	</div>
	<div class="c-flyout__content">
		<p>dit is een tooltip met extra info, deze verschijnt enkel on hover
			& click</p>
	</div>
</div>
			

		

Documentation

States

  • is-open

    Indicates that the content of the flyout is displayed, this is only usable when on mobile devices because on desktop a hover is used to display the content.

JavaScript

  • js-flyout

    Indicates that the flyout component is using JavaScript for its interactivity. Remove this class if the JavaScript defined in the brandplatform is no longer necessary.