XF 2.2 Can I use the built-in tooltip system for tappable mobile tooltips?

[Joe Link]

We use the built-in tool-tip system extensively for helping members with various aspects of the site.

<span data-xf-init="tooltip" title="Tooltip text">Here's a tip</span>

Unfortunately, tapping these doesn't seem to work on mobile devices. I know the member tooltips do work, so I'm hoping there's a way I can make these other tool-tips behave the same way. Anyone know?

 

[Paul B]

If you are referring to the member cards, those aren't tooltips.

You could use jquery, or there's this simple CSS solution from here: https://stackoverflow.com/questions/12539006/tooltips-for-mobile-browsers

<xf:css>@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
  }

}</xf:css>

<a title="This is the tooltip text" tabindex="0">This is the content</a>

You can see it in operation here: https://db76df28bf7ba8d3.demo-xenforo.com/223/index.php?help/testing/

It can obviously be styled to suit.

 

[Joe Link]

Thanks @Brogan, I'll check it out