search

zdhxiong / mdui

Material Design 3(Material You) UI components using Web Components.
https://www.mdui.org
4.1k stars 357 forks source link

Add ability to customize the margin for tooltips #333

Open stavros-tsioulis opened 1 month ago

stavros-tsioulis commented 1 month ago

Hello. I see the mdui-tooltip component has fixed margins between the component it is attached to. It would be great if we could use our own margins for nicer customization. https://github.com/zdhxiong/mdui/blob/c9a02de155dce36b3dd3bfbb34da7fe175c376bd/packages/mdui/src/components/tooltip/index.ts#L473-L474

zdhxiong commented 1 month ago

In what scenarios do you need to customize these two parameters?

stavros-tsioulis commented 1 month ago

To adhere to a design, the tooltip needed to be further from the component than 4 pixels. I worked around it by applying margin in an inner container within the tooltip, but because the background of the tooltip is applied to the topmost container, I ended up having to do some style hacks to not have empty background on the extra offset I created:

#user-tooltip::part(popup) {
  background-color: transparent;
  box-shadow: none;
}