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 2 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
1 change: 1 addition & 0 deletions docs/_includes/infotip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

<p>An infotip is a button which can be clicked to display information about another element or area on the page.</p>
<p>Toggle the <span class="highlight">aria-expanded</span> state of the button to expand or collapse the infotip.</p>
<p>For these examples, we are using floating-ui to position the infotip and the arrow.</p>

<div class="demo">
<div class="demo__inner">
Expand Down
51 changes: 4 additions & 47 deletions docs/_includes/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<p>A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.</p>
<p>The tooltip must be programmatically associated with the button by using the <span class="highlight">aria-describedby</span> property and <span class="highlight">tooltip</span> role.</p>
<p>Toggle the <span class="highlight">aria-expanded</span> state of the button to expand or collapse its associated tooltip.</p>
<p>For these examples, we are using floating-ui to position the tooltip and the arrow.</p>

<div class="demo">
<div class="demo__inner">
Expand All @@ -13,8 +14,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">
<span class="tooltip__pointer"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand All @@ -34,7 +35,7 @@
</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>
<span class="tooltip__pointer"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand All @@ -45,48 +46,4 @@
</div>
</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>
<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">
<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__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Pointer Left</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="false" aria-label="Info">
<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__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Pointer Left</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

</div>
15 changes: 8 additions & 7 deletions docs/_includes/tourtip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@

<p>A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.</p>
<p>Toggle the <span class="highlight">tourtip--expanded</span> modifier to expand or collapse the tourtip.</p>
<p>For this example, we are using floating-ui to position the tourtip and the arrow</p>
agliga marked this conversation as resolved.
Show resolved Hide resolved

<div class="demo">
<div class="demo__inner">
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer tourtip__pointer--top"></span>
<div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
Expand All @@ -30,8 +31,8 @@ <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
{% highlight html %}
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer tourtip__pointer--top"></span>
<div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
Expand All @@ -55,8 +56,8 @@ <h3>With footer</h3>
<div class="demo__inner">
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer tourtip__pointer--top"></span>
<div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
Expand All @@ -83,7 +84,7 @@ <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
<div class="tourtip tourtip--expanded">
<p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
<span class="tourtip__pointer tourtip__pointer--top"></span>
<span class="tourtip__pointer"></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
Expand Down
Loading
Loading