mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
3fdd7cf5e4
* Fixed button border in settings/download-clients Button border for "Add new" is now uniform with other "Add new"-buttons * enhancement(docs) add helper tooltips - Add helper tooltips for inputs and link them to docs #161 * fix build error * tooltips: changed positition * hide tooltip below 640 width * made tooltips better now attaching to TextField names * Added icon variation for MultiSelect and CheckboxField * cleaned up old code * refactor Co-authored-by: ze0s <zze0s@users.noreply.github.com> * added tooltips for DownloadClientForms * added tooltips for indexerforms * div for passwordfieldwide * tooltips for details.tsx * added tooltips to actions.tsx * added tooltips to indexerforms.tsx * replaced info icon with a more rudimentary one * linting, removed duplicate tailwind display properties * remove margin for flex centering * fixed tooltip alignment on all fields * add tooltip to PwFieldWide in indexer edit window * refactor: simplify tooltips * refactor: scope tooltip css * refactor: tooltip default clickable --------- Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com> Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
27 lines
No EOL
1,013 B
TypeScript
27 lines
No EOL
1,013 B
TypeScript
import { PlacesType, Tooltip } from "react-tooltip";
|
|
import "./CustomTooltip.css";
|
|
|
|
|
|
interface CustomTooltipProps {
|
|
anchorId: string;
|
|
children?: React.ReactNode;
|
|
clickable?: boolean;
|
|
place?: PlacesType;
|
|
}
|
|
|
|
export const CustomTooltip = ({
|
|
anchorId,
|
|
children,
|
|
clickable = true,
|
|
place = "top"
|
|
}: CustomTooltipProps) => {
|
|
const id = `${anchorId}-tooltip`;
|
|
return (
|
|
<div className="flex items-center">
|
|
<svg id={id} className="ml-1 w-4 h-4" viewBox="0 0 72 72"><path d="M32 2C15.432 2 2 15.432 2 32s13.432 30 30 30s30-13.432 30-30S48.568 2 32 2m5 49.75H27v-24h10v24m-5-29.5a5 5 0 1 1 0-10a5 5 0 0 1 0 10" fill="currentcolor"/></svg>
|
|
<Tooltip style= {{ maxWidth: "350px", fontSize: "12px", textTransform: "none", fontWeight: "normal", borderRadius: "0.375rem", backgroundColor: "#34343A", color: "#fff", opacity: "1" }} delayShow={100} delayHide={150} place={place} anchorId={id} data-html={true} clickable={clickable}>
|
|
{children}
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}; |