4.3.4 • Published 21 days ago
@maggioli-design-system/mds-tooltip v4.3.4
mds-tooltip
Version 4.0.0 breaking change
You can now use a query selector to taget a trigger element:
<span class="trigger-element">Hello world</span>
<mds-tooltip target=".trigger-element"></mds-tooltip>Up until version 3.x.x you were forced to use an id selector:
<span id="trigger-element">Hello world</span>
<mds-tooltip target="trigger-element"></mds-tooltip>This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
arrow | arrow | If set, the component will have an arrow pointing to the caller. | boolean \| undefined | true |
autoPlacement | auto-placement | If set, the component will be placed automatically near it's caller. | boolean \| undefined | true |
flip | flip | Specifies the placement of the component if no space is available where it is placed. | boolean | false |
offset | offset | Sets distance between the tooltip and the caller. | number | 12 |
placement | placement | Specifies where the component should be placed relative to the caller. | "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" \| undefined | 'top' |
shift | shift | If set, the component will be kept inside the viewport. | boolean \| undefined | true |
shiftPadding | shift-padding | Sets a safe area distance between the tooltip and the viewport. | number | 12 |
strategy | strategy | Sets the CSS position strategy of the component. | "absolute" \| "fixed" \| undefined | 'fixed' |
target (required) | target | Specifies the selector of the target element, this attribute is used with querySelector method. | string | undefined |
typography | typography | Specifies the font typography of the element | "caption" \| "detail" \| "tip" | 'tip' |
visible | visible | Specifies the visibility of the component. | boolean | false |
Slots
| Slot | Description |
|---|---|
"default" | Add text string to this slot, avoid to add HTML elements or components here. |
Shadow Parts
| Part | Description |
|---|---|
"text" |
CSS Custom Properties
| Name | Description |
|---|---|
--mds-tooltip-arrow-background | Sets the fill color of the arrow. |
--mds-tooltip-background | Sets the background-color of the tooltip. |
--mds-tooltip-delay | Sets the delay of the tooltip. |
--mds-tooltip-drop-shadow | Sets the drop-shadow of the tooltip. |
--mds-tooltip-duration | Sets the duration of the tooltip animation. |
--mds-tooltip-ease | Sets the easing of the tooltip animation. |
--mds-tooltip-transform-from | Sets the from animation transform of the tooltip. |
--mds-tooltip-transform-to | Sets the to animation transform of the tooltip. |
--mds-tooltip-z-index | Sets the z-index of the component. |
Dependencies
Used by
Depends on
Graph
graph TD;
mds-tooltip --> mds-text
mds-help --> mds-tooltip
style mds-tooltip fill:#f9f,stroke:#333,stroke-width:4pxBuilt with love @ Gruppo Maggioli from R&D Department
4.3.4
21 days ago
4.3.3
2 months ago
4.3.2
2 months ago
4.3.1
3 months ago
4.3.0
3 months ago
4.2.3
4 months ago
4.2.2
5 months ago
3.5.0
8 months ago
4.1.0
6 months ago
4.0.1
7 months ago
4.0.0
8 months ago
4.2.1
6 months ago
4.2.0
6 months ago
4.0.2
7 months ago
3.4.0
1 year ago
3.3.0
1 year ago
3.2.2
1 year ago
3.2.1
1 year ago
2.0.2
1 year ago
3.1.0
1 year ago
3.0.0
1 year ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago