Gin theme's tooltip style can interfere with site theme tooltip style

Created on 25 May 2024, 11 months ago
Updated 9 July 2024, 10 months ago

Problem/Motivation

Note: I don't think this should be reviewed or an attempt made to address it until after Drupal 10.3 has been released with the new Navigation sidebar in Core to see if that still causes any issues.

When using the Gin admin theme along with the experimental Drupal Navigation integration alongside a site theme that uses Bootstrap tooltips, the Gin theme's tooltip styling interferes with the Bootstrap tooltip styling. I have attached screenshots showing the tooltips when logged in vs anonymous, to demonstrate the issue. Screenshot 2024-05-24 at 18.30.35.png is the one when logged in using the navigation sidebar. This doesn't seem to be a problem when using any other toolbar option with the Gin theme.

There must be some tooltip CSS in the Gin theme that targets a common CSS class that's also used by the Bootstrap tooltips and possible tooltips provided by other third-party libraries that could be used in a theme.

Steps to reproduce

This can be reproduced if you have a site theme that's using Bootstrap 5 and you have Javascript to add tooltips to all elements that have a title attribute.

Go to the Gin theme settings and select the experimental Drupal Navigation integration, then view the front end with the sidebar and hover over an element that uses a tooltip.

Proposed resolution

Make sure the Gin theme's CSS for the navigation integration doesn't use a generic class such as "tooltip" (this seems the most likely cause).

However, again this should probably wait for the release of Drupal 10.3 with the new navigation to see if it's still a problem when using this version of the Gin theme.

🐛 Bug report
Status

Closed: outdated

Version

3.0

Component

Code

Created by

🇨🇦Canada teknocat

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

Comments & Activities

Production build 0.71.5 2024