Tooltips can appear off screen if the word is at the top of the page

[pdehaan]

Sample file (same as issue #28),

<p>THis is a test privacy page:</p>

I have a zero data privacy policy, because the privacy revolution is just a dark illusion. You can Encrypt and do Decryption. THe truthiness is that the robot army will hack the corporations and cause a cryptocurrency panic that will rewind society.

<div id="wanted">
  <h2>Wanted:</h2>
  <img src="bonjovi.jpg" />
</div>
<div id="seen">
  <h2>Seen:</h2>
  These are some dogs that I have seen.
</div>

Steps to reproduce:

1. Save the above HTML in a file called "tester.html".
2. Serve the file using Python's fantastic $ python -m SimpleHTTPServer.
3. Run npm run firefox to launch the add-on locally in Firefox Nightly.
4. Browse http://localhost:8000/tester.html
5. Hover over the "privacy" string at the very top of the page.

Actual results:

Dialogs that appear near the top of page are truncated:

Expected results:

[gregglind]

There are a ton of formatting issues with the hovers :(

[FezVrasta]

Take a look at Popper.js to properly position the tooltips 🙂