Поместить всплывающую подсказку MaterialUI "поверх" элемента привязки? (Реагировать)

Question

Кажется, невозможно разместить <Tooltip> "наверху" (сложенный / многослойный выше) запускающий элемент привязки.

Он всегда появляется за пределами родителя, используя "placement"решать где. Я считаю, что это инструмент Flip в Popper, который управляет размещением и обеспечивает видимость. Я пробовал передавать модификаторы параметров Поппера, чтобы отключить флип и отрегулировать смещение. Некоторые рекомендации заключались в том, чтобы пропустить предотвращение переполнения и отключить ускорение графического процессора. Я спустился в кроличью нору внутренностей MaterialUI, чтобы добиться этого. Я прокомментировал то, что кажется маловероятным излишним решением.

Пример вне MUI: react-tooltip(помимо этого вопроса, включает отслеживание указателя).

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      // computeStyle: {
      //   gpuAcceleration: false
      // },
      // preventOverflow: {
      //   enabled: false,
      //   padding: 0
      // },
      offset: {
        offset: '-20px -20px'
      }
    }
  }
}}></Tooltip>
    <h3>My Text</h3>
</Tooltip>

Answer 1

Вам нужно включить смещение следующим образом:

<Tooltip title="My Label" placement="top" PopperProps={{
  popperOptions: {
    modifiers: {
      flip: { enabled: false },
      offset: {
        enabled: true,
        offset: '0px -60px'
      }
    }
  }
}}>
    <h3>My Text</h3>
</Tooltip>

это позволит вам разместить всплывающую подсказку сверху