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

Joe Link

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

Code:
<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?
 

Brogan

XenForo moderator
Staff member
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

HTML:
<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.
 
Top