Skip to content

Commit

Permalink
feat(tooltip,tourtip,infotip): added popper support (#2165)
Browse files Browse the repository at this point in the history
  • Loading branch information
@agliga
agliga authored Dec 22, 2023
1 parent 175ab36 commit ff81aeb
Show file tree
Hide file tree
Showing 18 changed files with 1,044 additions and 18,197 deletions.
8 changes: 3 additions & 5 deletions dist/infotip/infotip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ span.infotip {
border-radius: var(--bubble-border-radius, var(--border-radius-50));
filter: var(--bubble-filter);
font-size: 14px;
left: 0;
max-width: 344px;
position: absolute;
top: 0;
transform: scale3d(1, 1, 1);
width: -webkit-max-content;
width: max-content;
z-index: 1;
background-color: var(--infotip-background-color, var(--color-background-primary));
color: var(--infotip-foreground-color, var(--color-foreground-primary));
display: none;
left: -6px;
margin-top: var(--spacing-200);
position: absolute;
}
.infotip__mask {
border-radius: var(--bubble-border-radius, var(--border-radius-50));
Expand Down Expand Up @@ -54,8 +54,6 @@ span.infotip__mask {
transform: rotate(45deg);
width: 8px;
z-index: 0;
top: -4px;
left: calc(50% - 4px);
}
.infotip__pointer--top-left {
top: -4px;
Expand Down
10 changes: 4 additions & 6 deletions dist/tooltip/tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@ span.tooltip {
}
.tooltip__overlay {
border-radius: var(--bubble-border-radius, var(--border-radius-50));
display: none;
filter: var(--bubble-filter);
font-size: 14px;
left: 0;
max-width: 344px;
position: absolute;
top: 0;
transform: scale3d(1, 1, 1);
width: -webkit-max-content;
width: max-content;
z-index: 1;
display: none;
left: -10px;
margin-top: var(--spacing-200);
position: absolute;
}
.tooltip__mask {
border-radius: var(--bubble-border-radius, var(--border-radius-50));
Expand Down Expand Up @@ -68,8 +68,6 @@ button.tooltip__close {
transform: rotate(45deg);
width: 8px;
z-index: 0;
top: -4px;
left: calc(50% - 4px);
background-color: var(--tooltip-background-color, var(--color-background-primary));
}
.tooltip__pointer--top-left {
Expand Down
8 changes: 4 additions & 4 deletions dist/tourtip/tourtip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,17 @@ span.tourtip {
}
.tourtip__overlay {
border-radius: var(--bubble-border-radius, var(--border-radius-100));
display: none;
filter: var(--bubble-filter);
font-size: 14px;
left: 0;
max-width: 344px;
position: absolute;
top: 0;
transform: scale3d(1, 1, 1);
width: -webkit-max-content;
width: max-content;
z-index: 1;
display: none;
position: absolute;
}
.tourtip__mask {
border-radius: var(--bubble-border-radius, var(--border-radius-100));
Expand Down Expand Up @@ -73,8 +75,6 @@ button.tourtip__close > svg {
transform: rotate(45deg);
width: 8px;
z-index: 0;
top: -4px;
left: calc(50% - 4px);
background-color: var(--tourtip-background-color, var(--color-background-primary));
}
.tourtip__pointer--top-left {
Expand Down
67 changes: 62 additions & 5 deletions docs/_includes/infotip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,70 @@
<div class="demo">
<div class="demo__inner">
<span class="infotip">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help" >
<svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
{% include symbol.html name="information-16" %}
</svg>
</button>
<div class="infotip__overlay" style="top: 30px; left: -6px">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
<h3 class="infotip__heading">Infotip</h3>
<p>Here's a tip to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
{% include symbol.html name="close-16" %}
</svg>
</button>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="infotip">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
<use href="#icon-information-16"></use>
</svg>
</button>
<div class="infotip__overlay" style="top: 30px; left: -6px">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
<h3 class="infotip__heading">Infotip</h3>
<p>Here's a tip to help you be successful at your task.</p>
</span>
<button class="icon-btn icon-btn--transparent infotip__close" type="button" aria-label="Dismiss infotip">
<svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
<use href="#icon-close-16"></use>
</svg>
</button>
</div>
</div>
</div>
</span>
{% endhighlight %}


<p>By default, the position of the overlay and its pointer will remain static. For these following examples, we are using <a target="_blank" href="https://floating-ui.com">floating-ui</a> to help position the tooltip and the pointer dynamically.</p>
<p>In order to get this to work with floating-ui, you need to remove pointer position <span class="highlight">infotip__pointer--top-left</span> and remove any style positioning</p>

<div class="demo">
<div class="demo__inner">
<span class="infotip infotip--js">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
{% include symbol.html name="information-16" %}
</svg>
</button>
<div class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span class="infotip__pointer"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
Expand All @@ -39,7 +96,7 @@ <h3 class="infotip__heading">Infotip</h3>
</svg>
</button>
<div class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span class="infotip__pointer"></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
Expand All @@ -63,14 +120,14 @@ <h3 class="infotip__heading">Infotip</h3>
<div class="demo__inner">
<p>
Inside paragraph
<span class="infotip">
<span class="infotip infotip--js">
<button class="icon-btn icon-btn--transparent infotip__host" type="button" aria-expanded="false" aria-label="Help">
<svg class="icon icon--information-16" focusable="false" width="16" height="16" aria-hidden="true">
{% include symbol.html name="information-16" %}
</svg>
</button>
<span class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span class="infotip__pointer"></span>
<span class="infotip__mask">
<span class="infotip__cell">
<span class="infotip__content">
Expand Down Expand Up @@ -99,7 +156,7 @@ <h3 class="infotip__heading">Infotip</h3>
</svg>
</button>
<span class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span class="infotip__pointer"></span>
<span class="infotip__mask">
<span class="infotip__cell">
<span class="infotip__content">
Expand Down
32 changes: 16 additions & 16 deletions docs/_includes/tooltip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
{% include symbol.html name="settings-24" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 8px); left: 4px">
<span class="tooltip__pointer tooltip__pointer--bottom-left"></span>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="top: 48px; left: 4px">
<span class="tooltip__pointer tooltip__pointer--top-left"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand All @@ -33,8 +33,8 @@
<use href="#icon-settings-24"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 8px); left: 4px">
<span class="tooltip__pointer tooltip__pointer--bottom-left"></span>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="top: 48px; left: 4px">
<span class="tooltip__pointer tooltip__pointer--top-left"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand All @@ -46,22 +46,23 @@
</span>
{% endhighlight %}

<h3 id="tooltip-position">Positioning the Tooltip</h3>
<p>The tooltip pointer modifier supports 8 different positions. In clockwise order, moving around the interactive element that is being pointed at, they are: bottom, bottom-left, left, top-left, top, top-right, right, bottom-right.</p>
<p>By default, the position of the overlay and its pointer will remain static. For these following examples, we are using <a target="_blank" href="https://floating-ui.com">floating-ui</a> to help position the tooltip and the pointer dynamically.</p>
<p>In order to get this to work with floating-ui, you need to remove pointer position <span class="highlight">tooltip__pointer--top-left</span> and remove any style positioning</p>

<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="false" aria-label="Info">
<span class="tooltip tooltip--js">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
{% include symbol.html name="settings-24" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="bottom: 4px; left: calc(100% + 12px)">
<span class="tooltip__pointer tooltip__pointer--left"></span>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip">
<span class="tooltip__pointer"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Pointer Left</p>
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
Expand All @@ -71,22 +72,21 @@ <h3 id="tooltip-position">Positioning the Tooltip</h3>
</div>
{% highlight html %}
<span class="tooltip">
<button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="false" aria-label="Info">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings-24" focusable="false" height="16" width="16" aria-hidden="true">
<use href="#icon-settings-24"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="bottom: 4px; left: calc(100% + 12px)">
<span class="tooltip__pointer tooltip__pointer--left"></span>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip">
<span class="tooltip__pointer"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Pointer Left</p>
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

</div>
Loading

0 comments on commit ff81aeb

Please sign in to comment.