Improve our tooltip

[caepenna]

Basic guidance for this issue

These are the base files used to build our current tooltip:

src/core/static/js/modules/tooltip.js
src/core/static/styles/components/_tooltip-box.scss

We'd like to keep our triggering concept intact, which is:
Any element that we include a data-tooltip="text content" and data-hide-tooltip="false" will trigger the tooltip to show itself with its "text content".

See it in action:
By adding an element with those data attributes yourself. Or...
By clicking in one of the red buttons inside an agenda, then hover on a disabled button:

With that in mind, we'd like to:

• Adapt its size based on its content, instead of resorting to an arbitrary min-width value. And it should only break lines when it reaches its max-width value

• Make it work when close to the edge of the screen. As of today, a section of the tooltip will overflow to the outside of the screen 😱

• Bonus item* Make it work properly when inside absolute or fixed positioned elements (We'll accept PRs that don't necessarily fix this, as I believe it might need a larger refactor of the current working code while adding plenty of JS)