Update Tooltip component to support z-index customization by css-variables

[IvanPresmytsky]

Browsers and versions affected

n/a

Description

For now Modal implemented with z-index defined by variable "--tx-generic-modal-z-index" equal to 100. And we have tooltip with z-index equal to 1000. In some cases we doesn't won't to have tooltip on the top of modal. We need to implement tooltip's z-index with css-variable too, to have ability customize it.

Expected results

Have ability to customize z-index of Modal and Tooltip by css-variables.

[asci]

you mean customize in runtime?

Maybe we can add something like level prop to Modal which will take care about z-index. But it should be an enum (1-10 or so), to keep it under control

[spzm]

I think Ivan idea was to create css variable for tooltip as well, because now it overlaps a modal. And dynamic customizing is another way (that could be better). The idea that in some cases we will need to set more z-index that some other element has (the need of z-index more then 10 is reality).

The minimum for this issue is to fix tooltip overlap over modal in ui-kit itself.

[iwwwi]

i do not know if creating a css variable will solve the issue ... maybe we can define set of z-indexes and the passing a prop will define which specific will be used? in this case we can allow to pass different z-indexes for all components that need it...
what do you think?