Tooltip: It cannot be triggered by a touch device

[marcoscv-work]

Tooltip cannot be triggered by a touch device.

What are the steps to reproduce?

• Use your touch device: iPhone, iPad, Android, etc..
• Go to the tooltip demo page: https://clayui.com/docs/components/tooltip.html
• Try to trigger the tooltip in any way
• Get desperately trying to make it work
• Stop trying, probably it does not work properly

What is the expected result?

• It should need a review and testing by Lexicon team before applying a solution
• The tooltip should be triggered from any device.
• Probably we need to show the tooltip by a "click" on the info icon trigger.

---

Tech	Version
Clay	v3.x

[victorvalle]

Could a solution be that "form field title + *" is the trigger for required fields?

[bryceosterhaus]

This might be something the user intentionally implements. AFAIK, our tooltips are written to follow the html standard for title, and html standard for titles isn't super great for touch devices.

It is possible for users to manually add support for onTouchStart like this

function App() {
  const [show, setShow] = React.useState(false);

  return (
    <div className="App">
      <ClayButtonWithIcon
        onTouchEnd={() => setShow(false)}
        onTouchStart={() => setShow(true)}
        spritemap={spritemap}
        symbol="info-circle"
      />

      <ClayTooltip alignPosition={"bottom"} show={show}>
        {"Tooltip"}
      </ClayTooltip>
    </div>
  );
}

[marcoscv-work]

I think that from a design point of view a tooltip and a title is not exactly the same, that's the reason we develop tooltips on top of titles, I really think that would awesome if we could offer an accessible tooltip mobile pattern out of the box

[bryceosterhaus]

@marcoscv-work I think it really depends on the use case, are you thinking we would provide an accessible tooltip on mobile for all title attributes? Currently our ClayTooltipProvider will automatically detect all title attributes and provide a tooltip, this is trying to cover the same use case for title. So if we don't want to mimic title, we should narrow down what use case we provide for mobile tooltips, maybe something specific for Icons like a ClayIconWithTooltip component that would also handle touch events?

[diegonvs]

I remember on Clay 2.x We had an implementation for it: https://github.com/liferay/clay/blob/0a97f7ddc4b3258b7f515c570d716347a88cd6f9/packages/clay-tooltip/src/ClayTooltip.js#L182

It waits the user to press the element with the tooltip for at least 500ms and then the element is shown.

[marcoscv-work]

it is already fixed in one of the last accessibility 2022 tasks.

[victorvalle]

Thanks @marcoscv-work ! Good work!

[diegonvs]

it is already fixed in one of the last accessibility 2022 tasks.

💪🏼