CODEWITHSUNDEEP
reactjsmaterial-uijoomla
ThatsJustCheesy
ThatsJustCheesy

Reputation: 1491

Material UI tooltips do not appear on Joomla website

I have an app running on an instance of Joomla (version 4).

I am trying to use the Material UI Tooltip component:

<Tooltip title="Tooltip">
  <Button>Button</Button>
</Tooltip>

but when I hover over the button, nothing appears. What am I doing wrong?

Upvotes: 0

Views: 20

Answers (1)

ThatsJustCheesy
ThatsJustCheesy

Reputation: 1491

Since Joomla 4, the default administrator template ("Atum") includes this SCSS:

// set up hidden tooltip
[role="tooltip"]:not(.show) {
  z-index: $zindex-tooltip;
  display: none;
  padding: .5em;
  margin: .25em;
  color: $white;
  text-align: start;
  background: $black;
  border-radius: .2rem !important;
}

The Tooltip component uses role="tooltip" for accessibility, so the Atum template's styling stomps all over the Tooltip's styling.

You can fix it by overriding the styles again:

[role="tooltip"].MuiTooltip-popper {
    display: unset !important;
    padding: unset !important;
    margin: unset !important;
    color: unset !important;
    text-align: unset !important;
    background: unset !important;
    border-radius: unset !important;
}

Upvotes: 0

Related Questions