✨ General Element + Tooltip to HoverCard

package.json

@@ -39,6 +39,7 @@
     "@mantine/modals": "^6.0.0",
     "@mantine/next": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
+    "@mantine/tiptap": "^6.0.17",
     "@nivo/core": "^0.83.0",
     "@nivo/line": "^0.83.0",
     "@react-native-async-storage/async-storage": "^1.18.1",
@@ -48,6 +49,10 @@
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.24.4",
     "@tanstack/react-query-persist-client": "^4.28.0",
+    "@tiptap/extension-link": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
     "@trpc/client": "^10.29.1",
     "@trpc/next": "^10.29.1",
     "@trpc/react-query": "^10.29.1",

public/locales/en/modules/bookmark.json

@@ -6,9 +6,7 @@
       "title": "Bookmark settings",
       "name": {
         "label": "Widget Title",
-        "placeholder": {
+        "info": "Leave empty to keep the title hidden. <a href=\"https://homarr.dev/docs/widgets/bookmarks/\" target=\"_blank\">See More...</a>"
-          "label" : "Leave empty to keep the title hidden"
-        }
       },
       "items": {
         "label": "Items"

src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx

@@ -13,14 +13,13 @@ import {
   Text,
   TextInput,
   Title,
-  Tooltip,
-  useMantineTheme,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
 import { IconAlertTriangle, IconPlaylistX, IconPlus, IconInfoCircle } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 
+import { InfoCard } from '../../../InfoCard/InfoCard';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { mapObject } from '../../../../tools/client/objects';
@@ -148,7 +147,7 @@ const WidgetOptionTypeSwitch: FC<{
             onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             {...option.inputProps}
           />
-          {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+          {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
         </Group>
       );
     case 'text':
@@ -156,7 +155,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <TextInput
             value={value as string}
@@ -170,7 +169,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <MultiSelect
             data={option.data}
@@ -187,7 +186,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <Select
             defaultValue={option.defaultValue}
@@ -204,7 +203,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <NumberInput
             value={value as number}
@@ -218,7 +217,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <Slider
             label={value}
@@ -268,7 +267,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <StaticDraggableList
             value={typedVal}
@@ -297,7 +296,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <MultiSelect
             data={value.map((name: any) => ({ value: name, label: name }))}
@@ -322,7 +321,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoTooltip label={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
           </Group>
           <DraggableList
             items={Array.from(value).map((v: any) => ({
@@ -364,23 +363,3 @@ const WidgetOptionTypeSwitch: FC<{
       return null;
   }
 };
-
-interface InfoTooltipProps {
-  label: string;
-}
-
-const InfoTooltip = ({ label }: InfoTooltipProps) => {
-  const { colorScheme } =useMantineTheme();
-  return (
-    <Tooltip.Floating
-      label={label}
-      position="right-start"
-      c={ colorScheme === 'light' ? "black" : "dark.0" }
-      color={ colorScheme === 'light' ? "dark.0" : "dark.6" }
-      styles={{ tooltip: { maxWidth: 300, }, }}
-      multiline
-    >
-      <IconInfoCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
-    </Tooltip.Floating>
-  )
-};

src/components/InfoCard/InfoCard.tsx

@@ -0,0 +1,44 @@
+import { HoverCard, useMantineTheme} from '@mantine/core';
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { IconInfoCircle } from '@tabler/icons-react';
+
+interface InfoCardProps {
+  content: string;
+}
+
+export const InfoCard = ({ content }: InfoCardProps) => {
+  const { colorScheme } = useMantineTheme();
+  const editor = useEditor({
+    content,
+    editable: false,
+    editorProps:{ attributes:{ style: 'padding: 0;' }, },
+    extensions: [
+      StarterKit,
+      Link,
+    ],
+  });
+
+  return (
+    <HoverCard withinPortal position="top">
+      <HoverCard.Target>
+        <IconInfoCircle size="1.25rem" style={{ display: 'block', opacity: 0.5 }} />
+      </HoverCard.Target>
+      <HoverCard.Dropdown
+        c='transparent'
+        maw={400}
+        p={0}
+        style={{ border:"0", }}
+      >
+        <RichTextEditor editor={editor}>
+          <RichTextEditor.Content
+            bg={colorScheme === 'light' ? "gray.2" : "dark.8"}
+            px="10px"
+            py="5px"
+          />
+        </RichTextEditor>
+      </HoverCard.Dropdown>
+    </HoverCard>
+  )
+};

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -54,6 +54,7 @@ const definition = defineWidget({
     name: {
       type: 'text',
       defaultValue: '',
+      info: true,
     },
     items: {
       type: 'draggable-editable-list',