Contrib.social

Tooltips for radios and checkbuttons not shown on Chrome/Edge/Webkit + bootstrap(3)

Open on Drupal.org →
Created on 20 March 2024, 11 months ago
Updated 5 April 2024, 11 months ago

Problem/Motivation

Using Webkit browsers (up until the current 123.x), tooltips/help texts are not shown, when their surrounding elements have position:relative (default in bootstrap-(3 only?)-based templates) and inlined labels (default in webform's form.css).

This is a bug in tippyjs (or webkit?), and I created it in their issue queue at https://github.com/atomiks/tippyjs/issues/1162 as a starting point.

This issue here is meant as a tracking issue and for those who have the same problem searching for issues in webform's queue.

Steps to reproduce

Reproducible at https://codepen.io/tgoeg/pen/wvZJzrz

  • Use a bootstrap-3-based template (maybe higher versions as well?).
  • Add help texts to radio buttons.
  • No visible tooltip when hovering over them when using a webkit-based browser.

Proposed resolution

I unset bootstrap's position:relative and it seems nothing broke. Fixes the issue for both webkit and firefox at least.

Remaining tasks

Unsure whether some workaround could or should be added to webform as well.

🐛 Bug report
Status

Closed: won't fix

Version

6.2

Component

Code

Created by

🇦🇹Austria tgoeg

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @tgoeg
  • Comment 11 months ago →
    carolea

    Hi,

    Is there any update on this please? We also encountered this issue.

    Many thanks!

  • Status changed to Postponed: needs info 11 months ago
  • Comment 11 months ago →
    cilefen

    Bootstrap 3 reached end-of-life more than four years ago. I don’t see how not supporting it is a bug in Webform.

    As a bug this will have to be verified against a supported release. Or perhaps it is a task.

  • Status changed to Closed: won't fix 11 months ago
  • Comment 11 months ago →
    🇺🇸United States jrockowitz Brooklyn, NY

    I cannot replicate this issue using the https://www.drupal.org/project/bootstrap → theme and the webform.

    The example shows that the webform and bootstrap are causing a conflict that requires you to adjust the CSS.

  • Comment 11 months ago →
    carolea

    Hi,

    I maybe jumped on the wrong ticket here, I saw issue with tooltip and thought it matches so I added my 2 cents. Let me know if you'd prefer I open another ticket for this.

    To clarify our specific side, we aren't using bootstrap in our theme. The tooltip shows up just fine on firefox on hover but not on Chrome nor Edge browsers. There's no position:relative set on the parents.

    It feels like the Javascript is not activated somehow on Chrome and Edge while properly working on firefox.
    Please find attached the DOM on Firefox and on Chrome. It seems we're missing some attributes on Chrome (most obvious one being data-once="webform-element-help"). There is no errors in the console that could explain this behavior either.

    Do you have any ideas why the event wouldn't be attached to the tooltip on Chrome please?

    Thanks!

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024