Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Arrow overlaps text when custom padding is applied in v4.4.3

See original GitHub issue

I use custom padding which leads to text overlapping by arrow in v4.4.3.

In order to reproduce it change the main tooltip in the example application, so it has disabled multiline, solid effect, and custom padding, like the following:

<ReactTooltip
  id="main"
  place={place}
  type={type}

  // changes
  effect="solid"
  multiline={false}
  padding="5px 10px"
/>

See the difference between v4.4.2 and v.4.43

v4.4.2 arrow-overlap-v4 4 2

v4.4.3 arrow-overlap-v4 4 3

It seems like a result of the changes made in https://github.com/ReactTooltip/react-tooltip/pull/806 @erezcarmel @danielbarion

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

danielbarioncommented, Nov 8, 2022

Thank you so much @erezcarmel, I’ll do the review and the release tomorrow (or this week) as I’m on travel right now

1reaction

erezcarmelcommented, Nov 8, 2022

PR created: https://github.com/ReactTooltip/react-tooltip/pull/815

Top Results From Across the Web

[select] Arrow overlapping text when container is floated #8685

I have worked out how to solve the issue. At the moment the arrow is in the main area and not the padded...

Select element text runs over my custom arrow - Stack Overflow

Your select is always going to run over the top of the arrow as your arrow is the background of the div which...

Top Navigation Drop-Down arrow is overlapping the letters

I played around with the padding that I bolded below and I was able to move the arrow by increasing the padding. .menu-horizontal...

Cards - Bootstrap

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background...

HTML and CSS Tutorial - Nanyang Technological University

An HTML document is a text document, and it is human-readable. Today, HTML works together with CSS (Cascading Style Sheets) (for layout) and...