Set font-weight and font-size of tooltip

Ask the Community Customization
1

I’m almost embarrassed to ask this question because it seems like it should be obvious, but it has me stumped. I’ve been able to set size on the panels, as well as background, font-family, and padding of the tooltip, but I can’t get the font-weight or font-size of the tooltip to adjust on the Accessibility widget. I’ve tried every class attached to the tooltip revealed by dev tools, I’ve tried the multi-purpose ‘font’ property as well as the individual ones, and with & without ‘!important’ but no joy.

Here’s what I’ve got so far, but just need the last two pieces of the puzzle:

.global-styles,
.es-tooltip-container {
background: #333;
}

[class^=“floating-panel__Container-sc”] {
transform: scale(0.95);
}

[class*=“FloatingButton__FloatingButtonContainer-sc”] button {
transform: scale(0.96);
}

[class*=“Tooltip__StyledContent-sc”] {
padding: 5px 7px;
font-family: Arial, sans-serif;
}

3

Hi there, @Bob_Wilson :waving_hand:

Indeed, the font customization is a bit tricky here. Please replace this part:

.global-styles,
.es-tooltip-container {
  background: #333;
}

with this one:

@external {
  .es-tooltip-container {
   background: #333;
  }

.es-tooltip-container span {
    font-size: 16px;
    font-weight: normal;
  }
}

Check it out and let me know if it helped :wink:

4

@Max as always, you da man! Working great now - thank you.

5

It’s my pleasure :wink: