Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +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

23
app/react/components/BoxSelector/BoxOption.tsx
View file

@ -1,6 +1,7 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
import ReactTooltip from 'react-tooltip';
import { Tooltip } from '@@/Tip/Tooltip';
import './BoxSelectorItem.css';
@ -28,16 +29,8 @@ export function BoxOption<T extends number | string>({
type = 'radio',
children,
}: PropsWithChildren<Props<T>>) {
const tooltipId = `box-option-${radioName}-${option.id}`;
return (
<div
className={clsx('box-selector-item', className)}
data-tip
data-for={tooltipId}
tooltip-append-to-body="true"
tooltip-placement="bottom"
tooltip-class="portainer-tooltip"
>
<div className={clsx('box-selector-item', className)}>
<input
type={type}
name={radioName}
@ -52,13 +45,11 @@ export function BoxOption<T extends number | string>({
{children}
</label>
{tooltip && (
<ReactTooltip
place="bottom"
<Tooltip
position="bottom"
className="portainer-tooltip"
id={tooltipId}
>
{tooltip}
</ReactTooltip>
message={tooltip}
/>
)}
</div>
);

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>
);
}