Fluent UI Tooltip styling and use

[TerezaSimkova]

Hello everybody! I am starting to use fluent ui for one of my project and i´m a bit confused by the documentation and using in general. A lot of styling just doesn´t work even when i try all i have found about styling problems here or anywhere else. Some of them seems totally not possible to do at all. I would like to ask if there is some documentation or way that could help me understand the usage. I give you a few examples:

1. I need to turn off hovering on my tooltip, because it will be trigger in another way. I have used react useRef to access to ItooltipHost:

const tooltipRef = useRef<ITooltipHost>(null); 

In this way i can access show and dismiss, but still when i hover on tooltip it disappears, only if i add in the root: { pointerEvents: 'none'} and then do custom styling with the same style: pointer-event: none; i am able to disable it.

But it seems to me like a really bad way to do it, not really the best practice and code repetition. In microsoft documentation you should be able to style it through hostStyles and calloutProps, but finding the css style of every part of the tooltip is possible just from inspecting html code in the browser, and the ones that are not there, you can't style them. It is like you should guess what name it could have so you just lose a lot of time by finding out.

3. I need to change color of inner text of my tooltip. You could think that it is easy, you can do it inside of calloutProps, but no, the only styling it accepts is the one for beak, beak curtain or calloutMain. I had to write a new object with styles and pass it like tooltipProps to tooltip component to make it work.

4. Or let´s say i want to have some custom styling of the beak , and doesn't matter if my tooltip is shown on the top or bottom of the object i hover on. I have tried through calloutProps but again i found it impossible. Because you can't put both styles inside of calloutprops, because they overwrite themselves. Like here, if i want to style beak for all visualizations of tooltip (bottom/ top/left/right):

const calloutProps = {
    styles: {
    beak: {bottom: '-2px '; top: '-2px';}
}
}

The documentation doesn´t make it clear at all. Is there somebody that could help me to understand the right usage of this component ?
Thank you