Skip to content

Commit

Permalink
Docs(web): Add demo with Tooltip on Icon element
Browse files Browse the repository at this point in the history 
- New demo with tooltip on Icon element
  • Loading branch information
@pavelklibani
pavelklibani committed Feb 14, 2024
1 parent 17d58ad commit f54fdf9
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 5 deletions.
33 changes: 32 additions & 1 deletion packages/web/src/scss/components/Tooltip/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,6 +224,37 @@ on the `.Tooltip__arrow` to control it and prevent conflicts with the default CS
</div>
```

### Trigger

You can choose whether you want to open the tooltip on `click` and/or `hover`.
By default, both options are active, e.g., `data-spirit-trigger="click, hover"`.
If you only want the `click` trigger, you need to specify the trigger, as shown in the example below.
This setup might be preferable when you have a link in your tooltip, for example.

```html
<button type="button" id="tooltip-trigger" data-spirit-toggle="tooltip" data-spirit-target="#my-tooltip-trigger">
Toggle tooltip
</button>
<div class="TooltipWrapper d-inline-block">
<div
id="my-tooltip-trigger"
class="Tooltip is-hidden"
data-spirit-trigger="click"
<!--
Only
`click`
trigger
is
active
now.
--
>
> You can click on the link: <a href="#">Link to unknown</a>
<span class="Tooltip__arrow"></span>
</div>
</div>
```

### Advanced Floating Functionality

To enable the advanced floating functionality, you need to have activated [feature flag][readme-feature-flags] for placement, activate the JS plugin, wrap your tooltip with an element having the `data-spirit-element="tooltip-wrapper"` data attribute, and add the `data-spirit-placement-controlled` attribute to your tooltip element to modify the styling of arrows and tooltip placement.
Expand Down Expand Up @@ -261,7 +292,7 @@ works and to get an idea of all possible cases you may need to cover.
| `data-spirit-flip-fallback-axis-side-direction` | ["none" \| "start" \| "end" ] | "none" | ✕ | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. |
| `data-spirit-flip-fallback-placements` | string | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` |
| `data-spirit-placement` | [Placement Dictionary][dictionary-placement] | "bottom" | ✕ | Placement of tooltip |
| `data-spirit-trigger` | string | "click, hover" | ✕ | How tooltip is triggered: click, hover. You may pass multiple triggers; separate them with a comma. |
| `data-spirit-trigger` | ["click" \| "hover" \| "manual"] | "click, hover" | ✕ | How tooltip is triggered: `click`, `hover`, `manual`. You may pass multiple triggers; separate them with a comma. If you pass `manual`, no event listener will be added, and you should provide your own toggle solution. |

👆 All the attributes mentioned above can be also set as an object in the `config` attribute, like this: `data-spirit-config='{"flip": "true", "flipFallbackPlacements": "top, right, bottom"}'`. Please note that this configuration has lower priority than individual attributes and will be overwritten by them.

Expand Down
61 changes: 57 additions & 4 deletions packages/web/src/scss/components/Tooltip/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,11 +373,17 @@ <h2 class="docs-Heading">Dismissible Tooltip</h2>
<div class="docs-Stack docs-Stack--start">

<div class="TooltipWrapper d-inline-block">
<button class="Button Button--primary Button--medium" aria-describedby="my-dismissible-tooltip">I have a tooltip 😎</button>
<button
class="Button Button--primary Button--medium"
aria-describedby="my-dismissible-tooltip"
>
I have a tooltip 😎
</button>
<div
id="my-dismissible-tooltip"
class="Tooltip Tooltip--dismissible"
data-spirit-placement="right"
data-spirit-trigger="click"
>
Close me
<button
Expand Down Expand Up @@ -421,6 +427,7 @@ <h2 class="docs-Heading">Dismissible Tooltip via JS API and Floating UI</h2>
data-spirit-flip="true"
data-spirit-flip-cross-axis="true"
data-spirit-flip-fallback-placements="right, top-end"
data-spirit-trigger="manual"
data-spirit-placement-controlled
>
Close me
Expand Down Expand Up @@ -466,7 +473,7 @@ <h2 class="docs-Heading">Tooltip on Hover with Floating UI</h2>
class="Tooltip is-hidden"
data-spirit-placement="right"
data-spirit-flip-fallback-placements="left, top-start, bottom-start"
data-spirit-enable-hover="true"
data-spirit-trigger="click, hover"
data-spirit-placement-controlled
>
Hello there!
Expand All @@ -478,6 +485,53 @@ <h2 class="docs-Heading">Tooltip on Hover with Floating UI</h2>

</section>

<section class="docs-Section spirit-feature-tooltip-enable-data-placement">

<h2 class="docs-Heading">Tooltip on Icon Component</h2>

<div class="docs-Stack docs-Stack--start">

<span>
Click on the icon on the right to view the tooltip
<div class="TooltipWrapper d-inline-block" data-spirit-element="tooltip-wrapper">
<svg
width="16"
height="16"
data-spirit-toggle="tooltip"
data-spirit-target="#tooltip-example-with-icon">
<use xlink:href="/icons/svg/sprite.svg#info"/>
</svg>
<div
id="tooltip-example-with-icon"
class="Tooltip Tooltip--dismissible is-hidden"
data-spirit-placement="right"
data-spirit-flip="true"
data-spirit-flip-cross-axis="true"
data-spirit-flip-fallback-placements="top-start, bottom-start, left"
data-spirit-placement-controlled
>
Close me
<button
id="tooltip-example-with-icon-button"
type="button"
class="Tooltip__close"
aria-controls="tooltip-example-with-icon"
aria-expanded="true"
>
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/icons/svg/sprite.svg#close" />
</svg>
<span class="accessibility-hidden">Close</span>
</button>
<span class="Tooltip__arrow" data-spirit-element="arrow"></span>
</div>
</div>
</span>

</div>

</section>

<section class="docs-Section spirit-feature-tooltip-enable-data-placement">

<script type="module" src="floating-ui-example.mjs"></script>
Expand Down Expand Up @@ -609,7 +663,6 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
data-spirit-enable-shifting="true"
data-spirit-enable-sizing="true"
data-spirit-placement="top-start"
data-spirit-enable-hover="true"
data-spirit-enable-flipping-cross-axis="true"
data-spirit-flip-fallback-placements="top, right, bottom"
data-spirit-placement-controlled
Expand All @@ -626,4 +679,4 @@ <h2 class="docs-Heading">Advanced Floating Functionality</h2>
</div>
</section>

{{/ layout/plain }}
{{/ layout/plain }}

0 comments on commit f54fdf9

Please sign in to comment.