You might use a tooltip library like TippyJS. This has several nice features:
- It’s highly customizable
- It deals with placement automatically which, as your question suggests, is a trickier general problem than many folks realize.
I sent you a suggestion illustrating how to use Tippy in this case:
Alternatively, you might just stick with the HTML titles that you already have, though I guess you’d want to add that “Number of research papers…” business. The advantages there are
- It’s very lightweight
- Produces native system tooltips
- Preserved on export to SVG.
Personally, I like the TippyJS option and use it frequently.