@maggioli-design-system/mds-tooltip

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

• mds-help

Depends on

• mds-text

Graph

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

---

Built with love @ Gruppo Maggioli from R&D Department