Skip to content

Replace bulma-tooltip with a Vue component

https://redmine.teklia.com/issues/7464

Follow-up of !1862 (merged)

A new HelpPopup.vue component should replace the tooltips that we were using through bulma-tooltip.

  • When hovering over some other element, it immediately shows a Bulma dropdown whose maximum width should be 20rem.

  • When the mouse leaves the element, after a short delay (maybe 100ms?), the dropdown is hidden. The delay solves some common issues we have with dropdowns where the cursor drops into a 1px gap and the dropdown closes before its contents can be accessed, or where the cursor is not moved very accurately and leaves the dropdown for a very short time before returning.

  • If the dropdown's contents are focused (for example if you click on it, select text in it, etc.), it should remain visible no matter where the cursor goes.

To handle this, the component needs two slots:

  • the default slot contains whatever will be always displayed and hoverable;
  • the popup slot contains the popup's contents.
<HelpPopup>
  <template v-slot:default>
    <i class="icon-warning"></i>
  </template>
  <template v-slot:popup>
    <p>This thing is invalid. See the <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">documentation</a></p>
  </template>
</HelpPopup>

The component will probably also need to support an up prop to show the popup above an element instead of below it.

Any existing tooltip should be replaced by this component. Looking for the data-tooltip attribute should find them all.