scale-tooltip not workin for mobiles inside a scale-checkbox

[Tobbsen]

Scale Version
3.0.0-beta.142

Framework and version
I am using scale-checkbox and scale-tooltip together with Vue 2.6.14.

Current Behavior
The Bug occurs when I nest a <scale-tooltip> inside a <scale-checkbox>. This works for desktop but not for mobiles.
The behavior on Desktop:
Hover over the tooltip inside the checkbox-text and the tooltip is displayed correctly.
The behavior for Mobiles:
Click (no hover for mobiles) on the tooltip and it will not do anything, but selecting the checkbox.

Expected Behavior
Desktop:
fine as observed
Mobile:
when clicking on the tooltip I would expect the tooltip to expand (without toggling the checkbox). If it should toggle the checkbox also, is a UX question, but most importantly the tooltip should be accessible on the mobile devices too.

Code Reproduction

<scale-checkbox>
<scale-checkbox>
        Ich möchte zum
   <scale-tooltip
          placement="left"
   >
       <span slot="content">
            <span>Das sollte angezeigt werden</span>
       </span>
       <span class="tooltipHandler">Tooltip</span>
   </scale-tooltip> etwas zeigen
</scale-checkbox>

Desktop (please complete the following information):

• OS: MAC OS
• Browser Chrome
• Version 118.0.5993.117

Smartphone (please complete the following information):

• Device: Mac emulated in Dev Tools
• Browser Chrome
• Version 118.0.5993.117

Additional context
It seems if as the click or focus event is never reaching the nested tooltip when on mobile devices. On Desktop it works fine, as the hover event is reaching the tooltip. The checkbox works also, but it probably should not be toggled when focusing the tooltip on mobiles. This is a question of UX.

[JoschaIco]

Hi @Tobbsen,

as you mentioned this is a question of UX, technically it works as expected. The Tooltip is not meant to be combined with a checkbox directly. My first advice would be to make the Checkbox Label as descriptive as possible. If this is not enough, there's an optional helper text property you could use the show additional information:

If for some reason this does not fit your use case, you could think about adding help icons after the label and attach the tooltip to the icons:

If you need further guidance, don't hesitate to ask.

[tshimber]

hi @Tobbsen ! was advice above helpful?