js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixes #873

Browse Source
This commit is contained in:
Cory LaViska
2022-08-25 17:22:18 -04:00
parent 4cc5baaa0b
commit b6edba912b
3 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/components/tooltip.md
View File

@@ -343,6 +343,26 @@ const App = () => (
);
```
### Setting a Maximum Width
Use the `--max-width` custom property to change the width the tooltip can grow to before wrapping occurs.
```html preview
<sl-tooltip style="--max-width: 80px;" content="This tooltip will wrap after only 80 pixels.">
<sl-button>Hover me</sl-button>
</sl-tooltip>
```
```jsx react
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
<SlButton>Hover Me</SlButton>
</SlTooltip>
);
```
### Hoisting
Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.

1
src/components/tooltip/tooltip.styles.ts
View File

@@ -39,6 +39,7 @@ export default css`
}
.tooltip__body {
width: max-content;
max-width: var(--max-width);
border-radius: var(--sl-tooltip-border-radius);
background-color: var(--sl-tooltip-background-color);

2
src/components/tooltip/tooltip.ts
View File

@@ -31,7 +31,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart base__arrow - The popup's `arrow` part. Use this to target the tooltip's arrow.
* @csspart body - The tooltip's body.
*
* @cssproperty --max-width - The maximum width of the tooltip.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
* @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
*