Использование поп-апов

Импортировать поп-апы с учетом динамик. рендера

const TooltipPopup = dynamic(() => import('tooltips_component').then(mod => mod.TooltipPopup));

Использование:

{
    process.browser
    ? (
        <TooltipPopup
            tooltips={tooltipsSetup(planName)}
            btn={tooltipBtn}
            showSaveBar={showSaveBar}
            innerWidth={innerWidth}
            onHandleMenuNav={this.handleMenuNav}
        />
    )
    : null
}

tooltips - массив объектов с данными тултипов. Пример структуры:

const tooltipsSetup = [
    {
        dataFor: '',
        setting: '',
        available: bool,
        desc: [],
        title: '',
        children: Component
    }
];

btn - объект с текстом кнопки в поле text и ссылкой на страницу биллинга в url

innerWidth - ширина браузера

showSaveBar - статус показа контекст сэйв бара. Используется для определения открывать ссылку сразу на апдейт тарифа или выводить модалку с вопросом

onHandleMenuNav - ф-ция вывода модалки при уходе со страницы

Использование триггеров поп-апов

Импортировать

import { TooltipTrigger } from "tooltips_component";

Использование:

<TooltipTrigger dataFor={tooltipDataFor.imgSelect} showOnlyIcon={true}/>

dataFor - хтмл атрибут data-for, который определяет какой поп-ап куда показывается

showOnlyIcon - показывать только иконку(при true) или кнопку с иконкой