Встроенное всплывающее окно/подсказка в пользовательском интерфейсе React Semantic

Я следую примеру из официальной документации для создания простого всплывающего окна: https://react.semantic-ui.com/modules/popup

Итак, вот мой текущий код, который работает очень хорошо:

export default (state, methods) => {
  const { trigger, handleTooltipOpen, handleTooltipClose } = methods;

  return (
    <Popup className={ `tooltip ${ state.className }` } trigger={ trigger } open={ state.tooltipShown }
      onOpen={ handleTooltipOpen } onClose={ handleTooltipClose }
      on="hover" hideOnScroll>
        <p>Popup Text</p>
    </Popup>
  );
};

Но по умолчанию всплывающее окно добавляется в конец <body> (что меня очень сбивает с толку). Есть ли способ указать, где именно добавить всплывающее окно или какую-то опцию inline?

P.S. Я добавил ссылку на песочницу, где вы можете воспроизвести проблему — просто откройте ее в адаптивном мобильном режиме и Пролистать.


semantic-ui-react
person Vytalyi    schedule 04.07.2018    source источник
comment
Не могли бы вы рассказать нам, как вы называете этот код? Вы прошли trigger за это?   -  person totymedli    schedule 09.07.2018
comment
Я обновил исходный пост со ссылкой на песочницу   -  person Vytalyi    schedule 12.07.2018

Ответы (1)


arrow_upward
4
arrow_downward

Компонент Popup фактически использует компонент Portal для рендеринга в портал и другое дерево React. Это означает, что все реквизиты, доступные в компоненте Portal, также доступны в компоненте Popup. Если вы не хотите, чтобы ваш всплывающий портал монтировался на <body>, вы можете указать реквизит mountNode на Popup, который позволит ему монтироваться в другом месте.

person brianespinosa    schedule 09.07.2018
comment
Хорошо, mountNode работает хорошо, но теперь он не вычисляет положение всплывающего окна должным образом... Так что я не смог заставить его работать. Я также обновил свой исходный вопрос ссылкой на песочницу, так что, может быть, я делаю что-то не так? - person Vytalyi; 12.07.2018
comment
Неа. Вы не делаете это неправильно. К сожалению, в настоящее время semantic-ui-react не имеет возможности делать встроенные всплывающие окна в разметке. Поведение всплывающего окна по умолчанию не работает для вас или вас интересует только семантика разметки, генерируемой в другом дереве React в <body> документа? Если я понимаю проблему, которую она вызывает у вас, я, вероятно, смогу указать вам правильное направление для решения вашей проблемы. - person brianespinosa; 12.07.2018
comment
Спасибо за ответ, все, что я хочу, это понять, что именно мне нужно изменить в моем коде, чтобы он работал. Встроенные всплывающие подсказки — это просто попытка решить проблему с позиционированием. - person Vytalyi; 13.07.2018
comment
В вашем примере codepen позиционирование всплывающих подсказок не работает из-за переопределений CSS в вашем файле index.html. Когда вы удаляете эти переопределения, положение ваших всплывающих подсказок работает даже в вашем примере с порталом. Если вы все еще хотите использовать эти переопределения CSS, вы можете... но всплывающие подсказки не будут правильно позиционироваться, когда они являются дочерними элементами div с абсолютным позиционированием. Я бы рекомендовал обернуть ваш сегмент внутри div с абсолютным позиционированием, которое вы ищете. Затем вы сохраняете относительное позиционирование сегмента без переопределения, и это работает. - person brianespinosa; 13.07.2018