gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 18:18:55 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

feat(react/checkbox): use bootstrap tooltip

Browse Source
This commit is contained in:
Elian Doran 2025-08-05 22:29:17 +03:00
parent 523c7ac273
commit f196a78728
No known key found for this signature in database
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/stylesheets/style.css
View File

@ -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;

24
apps/client/src/widgets/react/FormCheckbox.tsx
View File

@ -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<HTMLLabelElement>(null);
if (hint) {
useEffect(() => {
let tooltipInstance: Tooltip | null = null;
if (labelRef.current) {
tooltipInstance = Tooltip.getOrCreateInstance(labelRef.current, {
html: true,
template: '<div class="tooltip tooltip-top" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});
}
return () => tooltipInstance?.dispose();
}, [labelRef.current]);
}
return (
<div className="form-checkbox">
<label
className="form-check-label tn-checkbox"
style={hint && { textDecoration: "underline dotted var(--main-text-color)" }} title={hint}>
style={hint && { textDecoration: "underline dotted var(--main-text-color)" }}
title={hint && escapeQuotes(hint)}
ref={labelRef}
>
<input
className="form-check-input"
type="checkbox"