@maggioli-design-system/mds-tooltip NPM

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

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

@floating-ui/dom @maggioli-design-system/styles @stencil/core clsx

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-571 @zalastax/nolb-_mag @maggioli-design-system/mds-help @maggioli-design-system/mds-keyboard @maggioli-design-system/mds-radial-menu-item

1 year ago

2 years ago

1 year ago

2 years ago