Skip to content

Commit

Permalink
feat(tooltip,tourtip,infotip): added popper support
Browse files Browse the repository at this point in the history
  • Loading branch information
@agliga
agliga committed Oct 2, 2023
1 parent 57ad24c commit e1b2a69
Show file tree
Hide file tree
Showing 14 changed files with 383 additions and 137 deletions.
29 changes: 29 additions & 0 deletions dist/infotip/infotip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,35 @@ span.infotip__mask {
top: -4px;
left: calc(50% - 4px);
}
.infotip__overlay [data-popper-arrow],
.infotip__overlay [data-popper-arrow]::before {
background-color: var(--infotip-background-color, var(--color-background-primary));
height: 8px;
position: absolute;
transform: rotate(45deg);
width: 8px;
z-index: 0;
}
.infotip__overlay [data-popper-arrow] {
visibility: hidden;
}
.infotip__overlay [data-popper-arrow]::before {
content: "";
transform: rotate(45deg);
visibility: visible;
}
.infotip__overlay[data-popper-placement^="top"] > [data-popper-arrow] {
bottom: -4px;
}
.infotip__overlay[data-popper-placement^="left"] > [data-popper-arrow] {
right: -4px;
}
.infotip__overlay[data-popper-placement^="right"] > [data-popper-arrow] {
left: -4px;
}
.infotip__overlay[data-popper-placement^="bottom"] > [data-popper-arrow] {
top: -4px;
}
.infotip__pointer--top-left {
top: -4px;
left: 12px;
Expand Down
29 changes: 29 additions & 0 deletions dist/tooltip/tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,35 @@ button.tooltip__close {
left: calc(50% - 4px);
background-color: var(--tooltip-background-color, var(--color-background-primary));
}
.tooltip__overlay [data-popper-arrow],
.tooltip__overlay [data-popper-arrow]::before {
background-color: var(--tooltip-background-color, var(--color-background-primary));
height: 8px;
position: absolute;
transform: rotate(45deg);
width: 8px;
z-index: 0;
}
.tooltip__overlay [data-popper-arrow] {
visibility: hidden;
}
.tooltip__overlay [data-popper-arrow]::before {
content: "";
transform: rotate(45deg);
visibility: visible;
}
.tooltip__overlay[data-popper-placement^="top"] > [data-popper-arrow] {
bottom: -4px;
}
.tooltip__overlay[data-popper-placement^="left"] > [data-popper-arrow] {
right: -4px;
}
.tooltip__overlay[data-popper-placement^="right"] > [data-popper-arrow] {
left: -4px;
}
.tooltip__overlay[data-popper-placement^="bottom"] > [data-popper-arrow] {
top: -4px;
}
.tooltip__pointer--top-left {
top: -4px;
left: 12px;
Expand Down
29 changes: 29 additions & 0 deletions dist/tourtip/tourtip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,35 @@ button.tourtip__close > svg {
left: calc(50% - 4px);
background-color: var(--tourtip-background-color, var(--color-background-primary));
}
.tourtip__overlay [data-popper-arrow],
.tourtip__overlay [data-popper-arrow]::before {
background-color: var(--tourtip-background-color, var(--color-background-primary));
height: 8px;
position: absolute;
transform: rotate(45deg);
width: 8px;
z-index: 0;
}
.tourtip__overlay [data-popper-arrow] {
visibility: hidden;
}
.tourtip__overlay [data-popper-arrow]::before {
content: "";
transform: rotate(45deg);
visibility: visible;
}
.tourtip__overlay[data-popper-placement^="top"] > [data-popper-arrow] {
bottom: -4px;
}
.tourtip__overlay[data-popper-placement^="left"] > [data-popper-arrow] {
right: -4px;
}
.tourtip__overlay[data-popper-placement^="right"] > [data-popper-arrow] {
left: -4px;
}
.tourtip__overlay[data-popper-placement^="bottom"] > [data-popper-arrow] {
top: -4px;
}
.tourtip__pointer--top-left {
top: -4px;
left: 12px;
Expand Down
9 changes: 5 additions & 4 deletions docs/_includes/infotip.html
View file
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 popperjs to position the infotip and the arrow</p>

<div class="demo">
<div class="demo__inner">
Expand All @@ -13,7 +14,7 @@
</svg>
</button>
<div class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span data-popper-arrow></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
Expand All @@ -39,7 +40,7 @@ <h3 class="infotip__heading">Infotip</h3>
</svg>
</button>
<div class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span data-popper-arrow></span>
<div class="infotip__mask">
<div class="infotip__cell">
<span class="infotip__content">
Expand Down Expand Up @@ -70,7 +71,7 @@ <h3 class="infotip__heading">Infotip</h3>
</svg>
</button>
<span class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span data-popper-arrow></span>
<span class="infotip__mask">
<span class="infotip__cell">
<span class="infotip__content">
Expand Down Expand Up @@ -99,7 +100,7 @@ <h3 class="infotip__heading">Infotip</h3>
</svg>
</button>
<span class="infotip__overlay">
<span class="infotip__pointer infotip__pointer--top-left"></span>
<span data-popper-arrow></span>
<span class="infotip__mask">
<span class="infotip__cell">
<span class="infotip__content">
Expand Down
15 changes: 9 additions & 6 deletions docs/_includes/tooltip.html
View file
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 popperjs 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 data-popper-arrow></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand Down Expand Up @@ -48,6 +49,8 @@

<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>For this example, we are using popperjs to position the tooltip and the arrow</p>

<div class="demo">
<div class="demo__inner">
<span class="tooltip">
Expand All @@ -56,8 +59,8 @@ <h3 id="tooltip-position">Positioning the Tooltip</h3>
{% 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-1" role="tooltip" data-placement="right">
<span data-popper-arrow></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand All @@ -76,8 +79,8 @@ <h3 id="tooltip-position">Positioning the Tooltip</h3>
<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-1" role="tooltip">
<span data-popper-arrow></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
Expand Down
15 changes: 8 additions & 7 deletions docs/_includes/tourtip.html
View file
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 popperjs to position the tourtip and the arrow</p>

<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 data-popper-arrow></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 data-popper-arrow></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 data-popper-arrow></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 data-popper-arrow></span>
<div class="tourtip__mask">
<div class="tourtip__cell">
<span class="tourtip__content">
Expand Down
Loading

0 comments on commit e1b2a69

Please sign in to comment.