diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 716064013..8d051e7b7 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -642,6 +642,10 @@ table.promoted-attributes-in-tooltip th { z-index: calc(var(--ck-z-panel) - 1) !important; } +.tooltip.tooltip-top { + z-index: 32767 !important; +} + .tooltip-trigger { background: transparent; pointer-events: none; diff --git a/apps/client/src/widgets/react/FormCheckbox.tsx b/apps/client/src/widgets/react/FormCheckbox.tsx index 723e28167..9e05100c4 100644 --- a/apps/client/src/widgets/react/FormCheckbox.tsx +++ b/apps/client/src/widgets/react/FormCheckbox.tsx @@ -1,3 +1,7 @@ +import { Tooltip } from "bootstrap"; +import { useEffect, useRef } from "preact/compat"; +import { escapeQuotes } from "../../services/utils"; + interface FormCheckboxProps { name: string; label: string; @@ -11,11 +15,29 @@ interface FormCheckboxProps { } export default function FormCheckbox({ name, disabled, label, currentValue, onChange, hint }: FormCheckboxProps) { + const labelRef = useRef(null); + + if (hint) { + useEffect(() => { + let tooltipInstance: Tooltip | null = null; + if (labelRef.current) { + tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, { + html: true, + template: '' + }); + } + return () => tooltipInstance?.dispose(); + }, [labelRef.current]); + } + return (