Tool Tip - Background Style

Radzen.Blazor Components
1

Hi,

I added a border using the style attribute on the ToolTipService. The border came through incorrectly for the pointing part of the bubble:

image
image1017×307 16.9 KB

Here is the code snippet:

new TooltipOptions
            {
                Position = TooltipPosition.Right,
                Duration = int.MaxValue,
                Style = "background-color: #F5F5F5; color: black; border: 1px solid black;"
            });
2

Well, this is expected since the pointing part is separate element. You might need to use styling similar to our themes if you want better results.

3

Alternatively, you can remove the pointing part with this CSS:

.rz-tooltip > div:after { display: none; }
4

Where do I put this for CSS Isolation or does it need to be globally applied?

If I can target the box with CSS Isolation, is there any reason why I would be able to rotate the div the correct number of degrees to have the border facing the correct direction?

Best,
Garrett

5

I went into the default-base.css file and edit the translate line to change the rotation degrees and it now works.

I noticed that all of the rz-DIRECTION-tooltip-content:after transform css used 45deg for all directions. I think if you were to change the rotation degrees for each direction so that the border draws correctly, this would fix the issue for everyone on all directions of the tooltip.

image
image1648×270 25.5 KB

FROM:

.rz-tooltip .rz-right-tooltip-content:after {
  content: ' ';
  position: absolute;
  width: 8px;
  height: 8px;
  top: 20px;
  left: 0;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -10px) rotate(45deg);
  border-bottom: inherit;
  border-right: inherit;
}

TO:

.rz-tooltip .rz-right-tooltip-content:after {
  content: ' ';
  position: absolute;
  width: 8px;
  height: 8px;
  top: 20px;
  left: 0;
  background-color: inherit;
  transform-origin: center;
  transform: translate(-50%, -10px) rotate(135deg); // Changed from 45deg to 135deg
  border-bottom: inherit;
  border-right: inherit;
}
6

I found that the main place to make the edit is in _tooltip.scss which is imported unto the default-base.scss file.

Best,
Garrett