Popovers add small overlays of content for housing secondary information. It’s important to keep secondary information simple and to a minimum. Also, avoid complex functionality.

Modals

1.0.0

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init();
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
1.0.1

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.0

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.1

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.2

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We removed the border around the modal. Why? Because you couldn’t see it. (#240)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
2.0.3

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed modal header title text colour to default text colour. (#317)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We removed the border around the modal. Why? Because you couldn’t see it. (#240)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-primary js-modal" data-modal="#myModalID" aria-label="YOUR BUTTON DESCRIPTION Hit enter to open modal">YOUR BUTTON DESCRIPTION</button>

<div class="modal js-modalbody" id="myModalID" tabindex="-1" role="dialog" aria-labelledby="modal-header-title1" aria-describedby="modal-bodyID" aria-hidden="true">
	<div class="modal-header">
		<button class="modal-header-close js-modalclose icon icon-size-sm icon-cross">Close modal and return to GUI page</button>
		<span class="modal-header-title" id="modal-header-title1">YOUR MODAL TITLE</span>
	</div>
	<div class="modal-body" id="modal-bodyID">
		YOUR MODAL CONTENT
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-hero">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-lg
  • modal-sm

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only
3.0.0

Modal

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults. Modals should be easy to digest so that the user can quickly get back to what they were doing.
Set the initial width of your modal depending on the amount of content you are showing.

Buttons are an independent ingredient (dependency) so make sure you include them in your blend if necessary.

Demo

What’s new since v2.0.3

This version changed: CSS/LESS, HTML, but not: JS
  • Changed the modal sizing classes to our new naming convention (#380)
  • Changed Modal close button markup structure for consistency; close icon now inside button
  • Renamed .modal-header-close to .modal-close; implementation similar to Alert close button
  • Adjusted modal padding and increased footer buttons gap
  • Reduced CSS specificity (#346)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Changed modal header title text colour to default text colour. (#317)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • We removed the border around the modal. Why? Because you couldn’t see it. (#240)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏
  • The headline in modals was hanging a bit low. We put it up again, tucked it’s shirt in and ironed it’s pants. Now the modal is presentable again. (#219)

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<button class="btn btn-{TYPE} js-modal" data-modal="#{ID}" aria-label="{BUTTON_TEXT}. Hit enter to open modal">{BUTTON_TEXT}</button>

<div class="modal js-modalbody" id="{ID}" tabindex="-1" role="dialog" aria-labelledby="{MODAL_TITLE_ID}" aria-describedby="{MODAL_BODY_ID}" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="modal-close btn btn-link btn-large js-modalclose">
			<span class="modal-sronly">Close modal and return to GUI page</span>
			<span class="icon icon-close" data-grunticon-embed></span>
		</button>
		<span class="modal-header-title" id="{MODAL_TITLE_ID}">{MODAL_TITLE}</span>
	</div>
	<div class="modal-body" id="{MODAL_BODY_ID}">
		{MODAL_CONTENT}
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-faint js-modalclose">
			Close
			<span class="modal-sronly">modal and return to GUI page</span>
		</button>
		<button type="button" class="btn btn-primary">Save changes</button>
	</div>
</div>

CSS

Modifier classes:
  • modal-large
  • modal-small

LESS

The main mixin is called: _modals(BOM)
This module comes with the usual init method and a public method:
  • GUI.modals.init(); after the page has been loaded.
  • GUI.modals.render(); for dynamically added elements after page load.
  • GUI.modals.toggelModal( _isOpen, $modal, target )
    • @param _isOpen [boolean] Whether to open or close the modal
    • @param $modal [jquery object] The modal element
    • @param target [string] Selector string to id the modal for opening only

Popovers

1.0.0

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo
<div class="popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init();
1.0.1

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.0

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.1

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.2

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The popover demanded space in the flow on initial page load. Really that didn’t make any sense as the popover was hidden at first and hidden things don’t need no space in the flow. No more space flowing! (#203)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<!-- Toggle switch popover (default) -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-primary popover js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

<!-- Dismissible popover -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-primary popover popover-dismissible js-popover">
		YOUR BUTTON TEXT
	</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">
			YOUR POPOVER HEADLINE
		</p>
		<p class="popover-popup-body">
			YOUR POPOVER CONTENT
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.0.3

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduced the pointer triangle size (#357)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The popover demanded space in the flow on initial page load. Really that didn’t make any sense as the popover was hidden at first and hidden things don’t need no space in the flow. No more space flowing! (#203)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<!-- Toggle switch popover (default) -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-{TYPE} popover js-popover">{BUTTON_TEXT}</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">{POPOVER_HEADLINE}</p>
		<p class="popover-popup-body">
			{POPOVER_CONTENT}
		</p>
	</div>
</div>

<!-- Dismissible popover -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-{TYPE} popover popover-dismissible js-popover">{BUTTON_TEXT}</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">{POPOVER_HEADLINE}</p>
		<p class="popover-popup-body">
			{POPOVER_CONTENT}
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.
2.1.0

Small overlays of content for housing secondary information. There are two popover options:

Toggle switch: Has a toggle function requiring the user to click on the original trigger to close the overlay. This allows multiple popovers to be open simultaneously.

Dismissible: Allows the user to click anywhere else on the screen to close the overlay. This allows only one popover to be open at time.

Logic has also been applied to ensure that the popover fits in the viewport on all devices.

The buttons in this example are not included and will have to be added to the blend separately.

Demo

What’s new since v2.0.3

This version changed: JS but not: CSS/LESS HTML,
  • Fixed popover pointer triangle positioning in XS breakpoint (#426)
  • Fixed popover pointer triangle positioning with multiple popovers (#429)

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Reduced the pointer triangle size (#357)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • The popover demanded space in the flow on initial page load. Really that didn’t make any sense as the popover was hidden at first and hidden things don’t need no space in the flow. No more space flowing! (#203)

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: HTML, JS but not: CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<!-- Toggle switch popover (default) -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-{TYPE} popover js-popover">{BUTTON_TEXT}</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">{POPOVER_HEADLINE}</p>
		<p class="popover-popup-body">
			{POPOVER_CONTENT}
		</p>
	</div>
</div>

<!-- Dismissible popover -->
<div class="popover-wrapper js-popover-wrapper">
	<button class="btn btn-{TYPE} popover popover-dismissible js-popover">{BUTTON_TEXT}</button>

	<div class="popover-popup js-popoverbody" aria-hidden="true" tabindex="-1" aria-label="Use the ESC key to close">
		<p class="popover-popup-title">{POPOVER_HEADLINE}</p>
		<p class="popover-popup-body">
			{POPOVER_CONTENT}
		</p>
	</div>
</div>

CSS

Modifier class:
  • popover-dismissible

LESS

The main mixin is called: _popovers(BOM)
This module comes with the usual init method:
  • GUI.popovers.init(); after the page has been loaded.
  • GUI.popovers.render(); for dynamically added elements after page load.

Tooltips

1.0.0

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init();
1.0.1

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.0

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.1

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • When attaching tooltips to a button element the tooltip got cut off. We explained to buttons that interrupting a well articulated tooltip is rude. Now tooltips won’t stop in the middle of (#220)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.2

Tool tips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Ensuring when Tooltip abbr title values are shown (for mobile) they don’t butt up against the abbr text

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • When attaching tooltips to a button element the tooltip got cut off. We explained to buttons that interrupting a well articulated tooltip is rude. Now tooltips won’t stop in the middle of (#220)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<span class="js-tooltip tooltip" title="YOUR TOOLTIP" tabindex="0">YOUR WORD</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.
2.0.3

Tooltips display when a hover event is triggered. On small devices the information is displayed inline.

Demo

What’s new since v2.0.2

This version changed: CSS/LESS but not: HTML, JS
  • Removed icon sizing classes; icon sizing maintained by Icons module
  • Styled inline tooltip text; now italic and lighter (muted) colour
  • Disabled inline tooltip text for buttons and icons at XS breakpoint; providing suitable positioning was too unreliable
  • Note: Tooltips attached to Direct embedded SVG icons are currently not supported (#384)

What’s new since v2.0.1

This version changed: CSS/LESS but not: HTML, JS
  • Ensuring when Tooltip abbr title values are shown (for mobile) they don’t butt up against the abbr text

What’s new since v2.0.0

This version changed: CSS/LESS but not: HTML, JS
  • When attaching tooltips to a button element the tooltip got cut off. We explained to buttons that interrupting a well articulated tooltip is rude. Now tooltips won’t stop in the middle of (#220)
  • Fanfare, Drum roll … We’ve added another brand. Yay! 👏

What’s new since v1.0.1

This version changed: CSS/LESS but not: HTML, JS
  • To make it easier to switch brands with Less we’ve added a brand variable. Building multibrand sites has never been this easy! (#203)

What’s new since v1.0.0

This version changed: JS but not: HTML, CSS/LESS
  • We got word that using our JavaScript in dynamic DOM application was a bit... clunky. Clunky wasn't good enough for us so we refactored all Javascript modules to unclunk all the things. Beware though, some JavaScript classes had to be injected to keep the modules clunk-free. (#140)
<!-- Using `<abbr>`: Kinda more semantically correct -->
<abbr class="js-tooltip tooltip" title="{TOOLTIP_TEXT}" tabindex="0">{TRIGGER_TEXT}</abbr>

<!-- Using `<span>` -->
<span class="js-tooltip tooltip" title="{TOOLTIP_TEXT}" tabindex="0">{TRIGGER_TTEXT}</span>

LESS

The main mixin is called: _tooltips(BOM)
This module comes with the usual init method:
  • GUI.tooltips.init(); after the page has been loaded.
  • GUI.tooltips.render(); for dynamically added elements after page load.