search

telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
375 stars 82 forks source link

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

Open Tobbsen opened 1 year ago

Tobbsen commented 1 year ago

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):

Smartphone (please complete the following information):

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 commented 1 year ago

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:

image image

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:

image

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