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 JavaScript framework you are using.

Properties

| Property | Attribute | Description | Type | Default | | --------------------- | ---------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | autoPlacement | auto-placement | If set, the component will be placed automatically near it's caller. | boolean | 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" | 'top' | | shift | shift | If set, the component will be kept inside the viewport. | boolean | 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" | '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

• mds-help
• mds-keyboard
• mds-radial-menu-item

Depends on

• mds-text

Graph

graph TD;
  mds-tooltip --> mds-text
  mds-help --> mds-tooltip
  mds-keyboard --> mds-tooltip
  mds-radial-menu-item --> mds-tooltip
  style mds-tooltip fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department