[Visualize] No tooltip displayed when hovering the "unlink saved search" icon

[kertal]

Kibana version: Master

Describe the bug: There's no information that the unlink icon of a visualization needs a double-click to actually unlink the saved search. the link's markup contains a tooltip attribute, but it's not displayed.

Steps to reproduce:

1. Create visualization based on a saved search
2. Try to unlink the saved search
3. Hovering the unlink icon doesn't show a tooltip, so there's no information here, that it just works with a double click

Expected behavior: A tooltip should be displayed, explaining the double click functionality

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[flash1293]

Great catch @kertal ! I would vote for moving this to react instead of adding the tooltip lib to visualize angular - we are so close anyway.

[kertal]

@flash1293 definitely! reactify all the things :)

[kertal]

Also I don't think we use double clicks in Kibana? If it's important that the user doesn't click this icon by accident, a confirm box would be a better way to handle this (Are you really, really sure you want to proceed? ☠️ )

[flash1293]

Agree, double click doesn't seem like the right tool here. Ping @elastic/kibana-design - do you have a suggestion how this should look and work in general?

[cchaos]

If it's detrimental, use a confirmation modal. If it's something that can be reverted, use a toast with an "Undo" button and allow clicking the "broken link" to be re-linked.

[jshreyans]

Hi everyone! I'd like to work on this issue. @kertal I wanted to confirm whether a tooltip has already been coded in and just doesn't appear on hovering or are we looking to actually add a tooltip.

[kertal]

dear @jshreyans that's great! there has been a tooltip but it isn't displayed. However, since we're migrating angular code to react, it makes for sense to migrate also this part of visualize. Then we could use our Eui Components for the tooltip:

https://elastic.github.io/eui/#/display/tooltip

also we could use a confirm modal

https://elastic.github.io/eui/#/layout/modal

so the task would to migrate the following angular markup to a react component:

<div
      ng-show="isVisible"
      ng-if="vis.type.requiresSearch && linked"
      class="fullWidth visEditor__linkedMessage"
    >
    <div class="kuiVerticalRhythmSmall">
      {{ ::'kbn.visualize.linkedToSearchInfoText' | i18n: { defaultMessage: 'Linked to Saved Search' } }}
      <a
        href="#/discover/{{savedVis.savedSearch.id}}"
      >
        {{ savedVis.savedSearch.title }}
      </a>
      &nbsp;
      <a
        data-test-subj="unlinkSavedSearch"
        href=""
        ng-dblclick="unlink()"
        tooltip="{{ ::'kbn.visualize.linkedToSearch.unlinkButtonTooltip' | i18n: { defaultMessage: 'Double click to unlink from Saved Search' } }}"
      >
        <span aria-hidden="true" class="kuiIcon fa-chain-broken"></span>
      </a>
    </div>
  </div>

It's not a tiny task to do, let me know if you're still interested