Blurry text in tooltip

[jamesrichard91]

When I use the Overlay and Tooltip as shown, the text is very blurry. I have figured out that the transform that is being used to position the tooltip is causing the issue. I have attached screenshots with the before and after while editing the style in the browser inspector.

                <span
                    className="fa fa-question-circle descriptionIcon"
                    onClick={() => this.setState({ showDescription: !showDescription })}
                    ref={(icon) => {
                        this.target = icon;
                    }}
                />
                <Overlay
                    rootClose
                    placement="top"
                    show={showDescription}
                    onHide={() => this.setState({ showDescription: false })}
                    target={() => this.target}
                    container={this}
                >
                    <Tooltip id="description-tooltip">
                        {description}
                    </Tooltip>
                </Overlay>

Original:

Fixed:

[taion]

we just match the upstream in using popper here. perhaps you're looking for twbs/bootstrap#22610

[Alpha-Dolphi]

I found a solution for anyone still looking for an answer. You just need to replace transform with left and top like so

if (this.state.opened) {
const ref = this.tooltipRef.current;

		const tooltip = ref.parentNode.parentNode;

		setTimeout(() => {
			const transform = tooltip.style.getPropertyValue('transform')

			const regex = /translate3d\(([^,]+),\s*([^,]+)/;
			const match = transform.match(regex);

			if (match) {
				const firstValue = match[1];
				const secondValue = match[2];

				tooltip.style.transform = "none";
				tooltip.style.left = firstValue;
				tooltip.style.top = secondValue;
			}
		}, 0)
	}