Bug 3: Multiline Highlights

In this lesson, we will try to fix the behavior of our tooltip on multiline highlights.

We'll cover the following

Multiline Highlight #

There’s a case where highlighting multiple lines make the tooltip appear in the middle of the line in which the highlight began. So it can fall outside the selected text.

My first thought is that we can get the width of the element surrounding the text and divide that by two for our x coordinate and whatever that Selection gives us for the y coordinate (at the beginning of selection). I inspect the rectangle that selection.getRangeAt(0).getClientRects()[0] gives, and compare it to when I highlight one line vs. multiple lines. I would expect the multiple line version to give a different height. But since that’s not the case, I check the output of getClientRects and realize that it gives multiple rectangles when the selection calls for it. That makes a lot of sense since the shape of a multiline selection often can’t be represented by one rectangle.

So the conditional logic for displaying the tooltip in the middle of the line that the selection started with is when getClientRects gives more than one rectangle, and the coordinates are given by the width of the surrounding node, and the y coordinate of the first rectangle.

Get hands-on with 1400+ tech skills courses.