Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tooltip,tourtip,infotip): added popper support #2165

Merged
merged 13 commits into from
Dec 22, 2023
Merged

feat(tooltip,tourtip,infotip): added popper support #2165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6da29c5
feat(tooltips): added floating ui support
agliga Dec 7, 2023
dad486b
fix: tourtip pointer
agliga Dec 18, 2023
b72a14d
fix: removed classes from infotip
agliga Dec 20, 2023
fd4eaf7
docs: updated docs to include no js case
agliga Dec 20, 2023
4f3552a
fix: added initial js to code
agliga Dec 20, 2023
f249903
Update docs/_includes/tourtip.html
agliga Dec 20, 2023
0cd4331
Update docs/_includes/tourtip.html
agliga Dec 20, 2023
7127b1d
Update docs/_includes/infotip.html
agliga Dec 20, 2023
b8e547d
Update docs/_includes/tooltip.html
agliga Dec 20, 2023
3e5454b
Update docs/_includes/infotip.html
agliga Dec 20, 2023
2b840d8
Update docs/_includes/tooltip.html
agliga Dec 20, 2023
e57c078
fix: stories
agliga Dec 21, 2023
7793850
fix: changed md to html
agliga Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions dist/infotip/infotip.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading