Material UI 工具提示未出现在 Joomla 网站上

Question

我有一个应用程序在 Joomla（版本 4）的实例上运行。

我正在尝试使用 Material UI

Tooltip

组件:

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

但是当我将鼠标悬停在按钮上时，什么也没有出现。我做错了什么？

Answer 1

自 Joomla 4 起，默认管理员模板（“Atum”）包含此 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;
}

Tooltip

组件使用

role="tooltip"

来实现可访问性，因此 Atum 模板的样式会压倒

Tooltip

的样式。

您可以通过再次覆盖样式来修复它：

[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;
}