For persistent tooltips, it is important that the element is assigned the attribute tabindex (with value 0):
<div class="tooltipAnchor" tabindex="0">
…
</div>
<!-- Default -->
<span class="tooltipAnchor" tabindex="0">
Tooltip Anchor
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom right">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
<!-- Documentation only -->
<div class="doc-section">
<div class="doc-notes" style="margin-bottom: var(--sp-component);">
<h2 class="doc-title">Nicht persistent (default)</h2>
<div style="margin-top: var(--sp);">
Standardmäßig werden Tooltips nur angezeigt, solange sich der Mauszeiger über dem Element befindet oder das Element über die Tastatur fokussiert wird.
</div>
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Bottom Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom left">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Bottom Center
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom center">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Bottom Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom right">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Top Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top left">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Top Center
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top center">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Top Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top right">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Center Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="center left">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" tabindex="0">
Center Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="center right">
<div class="tooltip-content">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
</div>
<div class="doc-section">
<div class="doc-notes" style="margin-bottom: var(--sp-component);">
<h2 class="doc-title">Persistent</h2>
<div style="margin-top: var(--sp);">
Persistente Tooltips werden angezeigt, sobald das Element angeklickt oder über die Tastatur fokussiert wird.
</div>
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Bottom Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom left">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Bottom Center
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom right">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Bottom Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="bottom right">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Top Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top left">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Top Center
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top center">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Top Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="top right">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Center Left
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="center left">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
<div style="margin-top: var(--sp);">
Position of Tooltip is <span class="tooltipAnchor" data-persistent="true" tabindex="0">
Center Right
<span class="tooltipAnchor-tooltip">
<div class="tooltip" data-position="center right">
<div class="tooltip-content">
Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href="./">Ich bin ein Link</a>
</div>
</div>
</span>
</span>
relative to the marked text.
</div>
</div>
<!-- Default -->
<span class="tooltipAnchor{{#modifier}} {{.}}{{/modifier}}"{{#if is-persistent}} data-persistent="true"{{/if}} tabindex="0">
{{{content}}}
{{#tooltip}}
<span class="tooltipAnchor-tooltip">
{{render '@tooltip' (contextData '@tooltipanchor' this) merge=true}}
</span>
{{/tooltip}}
</span>
<!-- Documentation only -->
{{#sections}}
<div class="doc-section">
<div class="doc-notes" style="margin-bottom: var(--sp-component);">
{{#title}}
<h2 class="doc-title">{{{.}}}</h2>
{{/title}}
{{#description}}
<div style="margin-top: var(--sp);">
{{{.}}}
</div>
{{/description}}
</div>
{{#variants}}
<div style="margin-top: var(--sp);">
{{#tooltipanchor}}
Position of Tooltip is {{render '@tooltipanchor' (contextData '@tooltipanchor' this) merge=true}} relative to the marked text.
{{/tooltipanchor}}
</div>
{{/variants}}
</div>
{{/sections}}
/* Default */
{
"content": "Tooltip Anchor",
"tooltip": {
"content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"position": "bottom right"
}
}
/* Documentation only */
{
"content": "Tooltip Anchor",
"tooltip": {
"content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"position": "bottom right"
},
"sections": [
{
"title": "Nicht persistent (default)",
"description": "Standardmäßig werden Tooltips nur angezeigt, solange sich der Mauszeiger über dem Element befindet oder das Element über die Tastatur fokussiert wird.",
"variants": [
{
"tooltipanchor": {
"content": "Bottom Left",
"tooltip": {
"position": "bottom left"
}
}
},
{
"tooltipanchor": {
"content": "Bottom Center",
"tooltip": {
"position": "bottom center"
}
}
},
{
"tooltipanchor": {
"content": "Bottom Right",
"tooltip": {
"position": "bottom right"
}
}
},
{
"tooltipanchor": {
"content": "Top Left",
"tooltip": {
"position": "top left"
}
}
},
{
"tooltipanchor": {
"content": "Top Center",
"tooltip": {
"position": "top center"
}
}
},
{
"tooltipanchor": {
"content": "Top Right",
"tooltip": {
"position": "top right"
}
}
},
{
"tooltipanchor": {
"content": "Center Left",
"tooltip": {
"position": "center left"
}
}
},
{
"tooltipanchor": {
"content": "Center Right",
"tooltip": {
"position": "center right"
}
}
}
]
},
{
"title": "Persistent",
"description": "Persistente Tooltips werden angezeigt, sobald das Element angeklickt oder über die Tastatur fokussiert wird.",
"variants": [
{
"tooltipanchor": {
"is-persistent": true,
"content": "Bottom Left",
"tooltip": {
"position": "bottom left",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Bottom Center",
"tooltip": {
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Bottom Right",
"tooltip": {
"position": "bottom right",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Top Left",
"tooltip": {
"position": "top left",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Top Center",
"tooltip": {
"position": "top center",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Top Right",
"tooltip": {
"position": "top right",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Center Left",
"tooltip": {
"position": "center left",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
},
{
"tooltipanchor": {
"is-persistent": true,
"content": "Center Right",
"tooltip": {
"position": "center right",
"content": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache. <a href=\"./\">Ich bin ein Link</a>"
}
}
}
]
}
]
}
@import "_tooltipAnchor.settings";
@import "_tooltipAnchor.styles";
$tooltipAnchor_styles: (
text-decoration: underline,
text-decoration-style: dashed,
text-decoration-color: $link_text-decoration-color,
text-decoration-skip-ink: auto,
text-decoration-thickness: $link_text-decoration-width,
text-underline-offset: $link_text-decoration-offset,
) !default;
%tooltipAnchor {
display: inline-block;
position: relative;
@include styles($tooltipAnchor_styles);
.tooltip {
position: absolute;
top: 100%;
left: 50%;
opacity: 0;
transition: $_transition-duration--out ease-in;
transform: translateY($tooltip_animation_offset);
pointer-events: none;
&[data-position~="bottom"][data-position~="left"] {
left: $tooltip_position_inset;
}
&[data-position~="bottom"][data-position~="right"] {
left: (100% - $tooltip_position_inset);
}
&[data-position~="top"] {
transform: translateY(-1 * $tooltip_animation_offset);
}
&[data-position~="top"][data-position~="center"] {
top: 0;
}
&[data-position~="top"][data-position~="left"] {
left: $tooltip_position_inset;
top: 0;
}
&[data-position~="top"][data-position~="right"] {
left: (100% - $tooltip_position_inset);
top: 0;
}
&[data-position~="center"][data-position~="left"] {
left: 0;
top: 50%;
transform: translateX(-1 * $tooltip_animation_offset);
}
&[data-position~="center"][data-position~="right"] {
left: 100%;
top: 50%;
transform: translateX($tooltip_animation_offset);
}
}
&:not([data-persistent]):hover,
&:focus,
&:focus-within {
outline: transparent;
.tooltip {
opacity: 1;
transform: none !important;
transition: $_transition-duration--in ease-out;
a, button {
pointer-events: all;
}
}
}
}
.tooltipAnchor {
@extend %tooltipAnchor;
}