<div style="padding: 4rem 0; text-align: center;">
<span>
Ik heb een tooltip
<button type="button" class="button button--icon tooltip-trigger" data-placement="right" data-title="Extra information in de popover">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
<path d="M9.07,4.43A1.3,1.3,0,0,0,7.61,3.07a2.78,2.78,0,0,0-2,1L3.89,2.46A5.5,5.5,0,0,1,8,.5c2.33,0,4.1,1.15,4.1,3.71s-3.25,3.47-3,6H6.34C5.9,7.28,9.07,6.06,9.07,4.43ZM5.81,13.5a1.92,1.92,0,1,1,3.83,0,1.92,1.92,0,1,1-3.83,0Z" />
</svg>
</span>
<span class="screen-reader-only">Beschrijft deze actie</span>
</button>
</span>
</div>
<div style="padding: 4rem 0; text-align: center;">
<span>
Ik heb een tooltip
<button type="button" class="button button--icon{{#if extraClasses}} {{{ extraClasses }}}{{/if}}"{{#if attributes}}{{{ attributes }}}{{/if}}>
<span aria-hidden="true">
{{#if exclamationMark}}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
<path d="M6.3,12.77a1.7,1.7,0,1,1,3.4,0,1.7,1.7,0,1,1-3.4,0ZM6.68,4,6.59,1.46H9.41L9.32,4l-.4,5.86H7.07Z"/>
</svg>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16" class="icon">
<path d="M9.07,4.43A1.3,1.3,0,0,0,7.61,3.07a2.78,2.78,0,0,0-2,1L3.89,2.46A5.5,5.5,0,0,1,8,.5c2.33,0,4.1,1.15,4.1,3.71s-3.25,3.47-3,6H6.34C5.9,7.28,9.07,6.06,9.07,4.43ZM5.81,13.5a1.92,1.92,0,1,1,3.83,0,1.92,1.92,0,1,1-3.83,0Z"/>
</svg>
{{/if}}
</span>
<span class="screen-reader-only">{{ screenReaderText }}</span>
</button>
</span>
</div>
{
"screenReaderText": "Beschrijft deze actie",
"attributes": "data-placement=\"right\" data-title=\"Extra information in de popover\"",
"extraClasses": "tooltip-trigger"
}
$popover-space: .5rem;
$popover-background-color: $grey-dark;
$popover-border-color: $grey-dark;
$popover-max-width: 20em;
$popover-border-radius: $border-radius;
$popover-font-size: .7778rem; // @todo Check if we can calculate this value with respect to existing font size (fs) list.
.tooltiplabel {
cursor: help;
}
abbr[title][class*="tooltiplabel"] {
text-decoration: none;
border: 2px solid #000;
border-style: none;
border-bottom-style: dotted;
}
.tooltip {
// Variables
$parent: &;
position: absolute;
background-color: $popover-background-color;
color: $white;
max-width: $popover-max-width;
border: $border-width $border-style $popover-background-color;
border-radius: $popover-border-radius;
font-size: $popover-font-size;
text-align: center;
z-index: $steps-indicator-third-layer + 1;
// Top
&[x-placement^="top"] {
margin-bottom: $popover-space;
#{$parent}__arrow {
border-width: $popover-space $popover-space 0 $popover-space;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -($popover-space);
left: calc(50% - #{$popover-space});
margin-top: 0;
margin-bottom: 0;
}
}
// Bottom
&[x-placement^="bottom"] {
margin-top: $popover-space;
#{$parent}__arrow {
border-width: 0 $popover-space $popover-space $popover-space;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -($popover-space);
left: calc(50% - #{$popover-space});
margin-bottom: 0;
margin-top: 0;
}
}
// Left
&[x-placement^="left"] {
margin-right: $popover-space;
#{$parent}__arrow {
border-width: $popover-space 0 $popover-space $popover-space;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -($popover-space);
top: calc(50% - #{$popover-space});
margin-left: 0;
margin-right: 0;
}
}
// Right
&[x-placement^="right"] {
margin-left: $popover-space;
#{$parent}__arrow {
border-width: $popover-space $popover-space $popover-space 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -($popover-space);
top: calc(50% - #{$popover-space});
margin-left: 0;
margin-right: 0;
}
}
// Arrow
&__arrow {
border-color: $popover-border-color;
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: ($popover-space * 0.5);
}
// Inner
&__inner {
padding: ($popover-space * 0.5) $popover-space;
}
}
import ExternalTooltip from 'tooltip.js';
export default function Tooltip (containerElement) {
var placement = containerElement.dataset.placement;
var title = containerElement.dataset.title;
var options = {
trigger: 'hover',
closeOnClickOutside: true,
container: document.body,
boundariesElement: document.body,
};
if (placement) {
options.placement = placement;
}
if (title) {
options.title = title;
}
options.template = '' +
'<div class="tooltip" role="alert">' +
'<div class="tooltip__arrow"></div>' +
'<div class="tooltip__inner"></div>' +
'</div>';
options.popperOptions = {
positionFixed: true,
};
const tooltip = new ExternalTooltip(containerElement, options);
containerElement.addEventListener("keydown", function(event) {
switch(event.keyCode) {
case 13:
case 32:
tooltip.toggle();
break;
case 27:
tooltip.hide();
break;
}
});
containerElement.addEventListener("blur", function() {
tooltip.hide();
});
}