The current implementation only places the hanger with the selected element's class name and dimensions to the right, and mangles the text by wrapping it if it's too far right.
An example of this done correctly is the popovers used in the main web inspector UI.
Yeah, this bugs me. Especially for elements that have a near-zero width or height.
Created attachment 340455 [details]
Created attachment 340457 [details]
Created attachment 340458 [details]
Created attachment 340460 [details]
[HTML] Test Page
This test includes eight boxes for testing element selection edge cases.
Boxes 1-4 are aligned with the four corners of the view.
Boxes 5-8 are aligned with the middle of each edge, but offset by their size to be completely outside the view. Hints are shown (each has an edge adjacent with the corresponding offscreen box).
This patch addresses tip positioning, but does not attempt to better position the arrow. That should be left as a follow-up.
Comment on attachment 340455 [details]
Clearing flags on attachment: 340455
Committed r231838: <https://trac.webkit.org/changeset/231838>
All reviewed patches have been landed. Closing bug.