Skip to content

Commit

Permalink
fix(tooltip): fixed tooltip bottom and bottom left showing in wrong p…
Browse files Browse the repository at this point in the history 
…laces
  • Loading branch information
@austingardner
austingardner committed Apr 13, 2021
1 parent 6464cd6 commit b98ebe8
Show file tree
Hide file tree
Showing 6 changed files with 349 additions and 118 deletions.
6 changes: 4 additions & 2 deletions dist/tooltip/ds4/tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,16 @@ button.tooltip__close {
left: auto;
right: 12px;
}
.tooltip__pointer--bottom-left {
.tooltip__pointer--bottom-left,
span.tooltip__pointer--bottom-left {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
bottom: -7px;
top: auto;
left: 12px;
}
.tooltip__pointer--bottom {
.tooltip__pointer--bottom,
span.tooltip__pointer--bottom {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
box-shadow: var(--bubble-bottom-box-shadow, 2px 2px 2px rgba(0, 0, 0, 0.15));
bottom: -7px;
Expand Down
6 changes: 4 additions & 2 deletions dist/tooltip/ds6/tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,16 @@ button.tooltip__close {
left: auto;
right: 12px;
}
.tooltip__pointer--bottom-left {
.tooltip__pointer--bottom-left,
span.tooltip__pointer--bottom-left {
box-shadow: 0 0 3px rgba(17, 24, 32, 0.499972);
box-shadow: var(--bubble-bottom-box-shadow, 0 0 3px rgba(17, 24, 32, 0.499972));
bottom: -7px;
top: auto;
left: 12px;
}
.tooltip__pointer--bottom {
.tooltip__pointer--bottom,
span.tooltip__pointer--bottom {
box-shadow: 0 0 3px rgba(17, 24, 32, 0.499972);
box-shadow: var(--bubble-bottom-box-shadow, 0 0 3px rgba(17, 24, 32, 0.499972));
bottom: -7px;
Expand Down
225 changes: 225 additions & 0 deletions docs/_includes/common/tooltip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
<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 tooltip.</p>

<h2>
Bottom Left
</h2>
<div class="demo">
<div class="demo__inner">
<span class="tooltip">
Expand Down Expand Up @@ -46,4 +49,226 @@
</span>
{% endhighlight %}

<h2>
Top Left
</h2>
<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
{% include common/symbol.html name="settings" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(-100% - 16px); left: 0">
<span class="tooltip__pointer tooltip__pointer--top-left"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
<use xlink:href="#icon-settings"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(-100% - 16px); left: 0">
<span class="tooltip__pointer tooltip__pointer--top-left"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

<h2>
Bottom
</h2>
<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
{% include common/symbol.html name="settings" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 16px); left: -140px;">
<span class="tooltip__pointer tooltip__pointer--bottom"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
<use xlink:href="#icon-settings"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 16px); left: -140px;">
<span class="tooltip__pointer tooltip__pointer--bottom"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

<h2>
Top
</h2>
<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
{% include common/symbol.html name="settings" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(-100% - 16px); left: -140px;">
<span class="tooltip__pointer tooltip__pointer--top"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
<use xlink:href="#icon-settings"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 16px); left: -140px;">
<span class="tooltip__pointer tooltip__pointer--top"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

<h2>
Bottom Right
</h2>

<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button accesskey="s" style="margin-left: 870px;" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
{% include common/symbol.html name="settings" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 16px); left: 590px;">
<span class="tooltip__pointer tooltip__pointer--bottom-right"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button accesskey="s" style="margin-left: 870px;" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
<use xlink:href="#icon-settings"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% + 16px); left: 590px;">
<span class="tooltip__pointer tooltip__pointer--bottom-right"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}

<h2>
Top Right
</h2>
<div class="demo">
<div class="demo__inner">
<span class="tooltip">
<button accesskey="s" style="margin-left: 870px;" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
{% include common/symbol.html name="settings" %}
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(-100% - 16px); left: 590px;">
<span class="tooltip__pointer tooltip__pointer--top-right"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
</div>
</div>
{% highlight html %}
<span class="tooltip">
<button accesskey="s" style="margin-left: 870px;" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
<svg class="icon icon--settings" focusable="false" height="16" width="16" aria-hidden="true">
<use xlink:href="#icon-settings"></use>
</svg>
</button>
<div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(-100% - 16px); left: 590px;">
<span class="tooltip__pointer tooltip__pointer--top-right"></span>
<div class="tooltip__mask">
<div class="tooltip__cell">
<div class="tooltip__content">
<p>Use Access Key 'S' to display settings.</p>
</div>
</div>
</div>
</div>
</span>
{% endhighlight %}


</div>
Loading

0 comments on commit b98ebe8

Please sign in to comment.