Поместить всплывающую подсказку MaterialUI сверху элемента привязки? (React) - PullRequest
Новая
       36

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

1 голос
/ 09 апреля 2020

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

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

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

<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>

1 Ответ

0 голосов
/ 10 апреля 2020

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

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

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

...