[material-ui][docs][Tooltip] Add demo to show how to change distance between tooltip and its anchor #40087
Conversation
Netlify deploy previewBundle size report |
danilo-leal
added
docs
|
Thanks for this @anle9650 ! Please run |
Hey @samuelsycamore running |
There was a problem hiding this comment.
Hey @samuelsycamore running yarn docs:typescript:formatted removes TooltipMargin.tsx.preview & TooltipOffset.tsx.preview from the PR, which show the code preview below the demos. Any ideas on how I can get around this?
It's excluded because the returned JSX is over 16 lines. Previews are generated only for code within that limit. Omitting the code preview seems acceptable here.
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: Andy Le <andy.le@ucdenver.edu>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: Andy Le <andy.le@ucdenver.edu>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: Andy Le <andy.le@ucdenver.edu>
Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: Andy Le <andy.le@ucdenver.edu>
@ZeeshanTamboli thanks for the heads up! I went ahead and removed those. |
ZeeshanTamboli
changed the title
There was a problem hiding this comment.
@anle9650 The tooltip margin customization wasn't working as expected. I had to target by increasing the CSS specificity with the following adjustment:
[`&.${tooltipClasses.popper}[data-popper-placement*="bottom"] .${tooltipClasses.tooltip}`]: {
marginTop: '0px';
}I also changed the margin from 20px to 0px because it seems that having less distance between the tooltip and the anchor is the most requested use case in #19848.
It looks good now. Thanks for your contribution!
…between tooltip and its anchor (mui#40087) Signed-off-by: Andy Le <andy.le@ucdenver.edu> Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Closes #19848
https://deploy-preview-40087--material-ui.netlify.app/material-ui/react-tooltip/#distance-from-anchor