Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 05:19:39 +02:00
Code Issues Releases Activity

fix(ui): tooltip stays open on hover [EE-3445] (#8051)

Browse source
This commit is contained in:
Prabhat Khera 2022-12-05 09:47:43 +13:00 • committed by GitHub
parent c173888b64
commit cbaba43842
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 191 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/react/components/BoxSelector/LimitedToBeIndicator.tsx
View file

@ -1,8 +1,9 @@
import ReactTooltip from 'react-tooltip';
import { HelpCircle } from 'lucide-react';
import clsx from 'clsx';
import { FeatureId } from '@/react/portainer/feature-flags/enums';
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
interface Props {
@ -10,35 +11,24 @@ interface Props {
featureId?: FeatureId;
}
export function LimitedToBeIndicator({ tooltipId, featureId }: Props) {
export function LimitedToBeIndicator({ featureId, tooltipId }: Props) {
const { url } = getFeatureDetails(featureId);
return (
<>
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
<a href={url} target="_blank" rel="noopener noreferrer">
<span className="text-warning-9">Pro Feature</span>
</a>
<HelpCircle
className="lucide !text-warning-7"
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="top"
tooltip-class="portainer-tooltip"
/>
</div>
<div className="absolute left-0 top-0 w-full">
<div className="mx-auto max-w-fit bg-warning-4 rounded-b-lg py-1 px-3 flex gap-1 text-sm items-center">
<a href={url} target="_blank" rel="noopener noreferrer">
<span className="text-warning-9">Pro Feature</span>
</a>
<TooltipWithChildren
position="bottom"
className={clsx(tooltipId, 'portainer-tooltip')}
heading="Business Edition feature."
message="This feature is currently limited to Business Edition users only."
>
<HelpCircle className="ml-1 !text-warning-7" aria-hidden="true" />
</TooltipWithChildren>
</div>
<ReactTooltip
className="portainer-tooltip"
id={tooltipId}
place="top"
delayHide={1000}
>
Business Edition feature. <br />
This feature is currently limited to Business Edition users only.
</ReactTooltip>
</>
</div>
);
}