0

I have this basic set up of a bootstrap tooltip to show a reason why item cannot be deleted. It contains a link.

<a
  class="btn btn-danger"
  href="javascript:void(0)"
  title="
    This element cannot be deleted, because it has some pending dependencies.
    <a href='/dependencies' class='text-white text-underline'>See dependencies</a>
  "
  data-toggle="tooltip"
  data-html="true"
  disabled
>
  Delete
</a>

$('[data-toggle="tooltip"]').tooltip({ container: 'body' });

Desktop Chrome emulator

Works as expected on a delete button click it opend the tooltip and when a link clicked in a tooltip, it redirects where expected.

iOS Safari

On a real device (i.e. iPhone) tooltip is opened, but the click on a link inside the tooltip closes the tooltip and the element beneath the tooltip receives the click instead.

Is there any solution for this issue?

Ignas Damunskis
  • 1,515
  • 1
  • 17
  • 44
  • Firstly, you shouldn't use an `a` tag when you want an action from a clickable element, you should consider using a buton: ` – Harrison Aug 31 '23 at 09:10
  • @Harrison Is there any documentation on such approach to links? – Ignas Damunskis Aug 31 '23 at 09:54
  • I’m sure there are lots of other reasons beyond semantics, readability and SEO, some of these are discussed on [this question](https://stackoverflow.com/questions/21715162/when-should-i-use-a-button-button-or-a-link-a-in-html) – Harrison Aug 31 '23 at 15:49

0 Answers0