chore(tsx): Tooltips - TypeScript, function based & split

teamized/app/package.json

@@ -18,6 +18,7 @@
     "@babel/preset-env": "7.26.0",
     "@babel/preset-react": "7.25.9",
     "@babel/preset-typescript": "7.26.0",
+    "@types/bootstrap": "^5.2.10",
     "@types/jquery": "3.5.32",
     "babel-loader": "9.2.1",
     "prettier": "3.3.3",

teamized/app/src/components/common/dashboard/tile.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { IconTooltip } from '../../tooltips.jsx';
+
+import { IconTooltip } from '../tooltips/iconTooltip';
 
 interface Props {
     title: string | null;

teamized/app/src/components/common/tooltips/iconTooltip.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tooltip } from './tooltip';
+
+interface Props {
+    title: string;
+    icon: string;
+    className: string;
+}
+
+export function IconTooltip({
+    title,
+    icon = 'fas fa-info-circle',
+    className = '',
+}: Partial<Props>) {
+    return (
+        <Tooltip className={className} title={title}>
+            <i className={'fa-fw ' + icon}></i>
+        </Tooltip>
+    );
+}

teamized/app/src/components/common/tooltips/tooltip.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import { Tooltip as BSTooltip } from 'bootstrap';
+
+interface Props {
+    title: string;
+    className: string;
+    children: React.ReactNode;
+}
+
+export function Tooltip({ title, className = '', children }: Partial<Props>) {
+    const tooltipRef = useRef<HTMLElement>(null);
+
+    useEffect(() => {
+        const tooltip = new BSTooltip(tooltipRef.current as HTMLElement);
+
+        return () => tooltip.dispose();
+    }, []);
+
+    return (
+        <abbr
+            className={className}
+            title={title}
+            data-bs-toggle="tooltip"
+            ref={tooltipRef}
+        >
+            {children}
+        </abbr>
+    );
+}

teamized/app/src/components/pages/calendars.jsx

@@ -11,7 +11,8 @@ import * as Cache from '../../utils/cache.ts';
 import * as Navigation from '../../utils/navigation.tsx';
 
 import * as Dashboard from '../common/dashboard.tsx';
-import { IconTooltip, Tooltip } from '../tooltips.jsx';
+import { IconTooltip } from '../common/tooltips/iconTooltip';
+import { Tooltip } from '../common/tooltips/tooltip';
 
 const WEEKDAYS = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 

teamized/app/src/components/pages/club.jsx

@@ -11,7 +11,8 @@ import * as Dashboard from '../common/dashboard.tsx';
 import * as Cache from '../../utils/cache.ts';
 import * as Club from '../../utils/club.ts';
 import * as Navigation from '../../utils/navigation.tsx';
-import { IconTooltip } from '../tooltips.jsx';
+
+import { IconTooltip } from '../common/tooltips/iconTooltip';
 
 class ClubMembersTableRow extends React.Component {
     constructor(props) {

teamized/app/src/components/pages/home.jsx

@@ -12,7 +12,8 @@ import * as Dashboard from '../common/dashboard.tsx';
 import * as Utils from '../../utils/utils.ts';
 import * as Settings from '../../utils/settings.ts';
 import * as Navigation from '../../utils/navigation.tsx';
-import { IconTooltip } from '../tooltips.jsx';
+
+import { IconTooltip } from '../common/tooltips/iconTooltip';
 
 export default class Page_Home extends React.Component {
     constructor(props) {

teamized/app/src/components/pages/team.jsx

@@ -12,7 +12,8 @@ import * as Club from '../../utils/club.ts';
 import * as Teams from '../../utils/teams';
 import * as Navigation from '../../utils/navigation.tsx';
 import * as Dashboard from '../common/dashboard.tsx';
-import { IconTooltip, Tooltip } from '../tooltips.jsx';
+import { IconTooltip } from '../common/tooltips/iconTooltip';
+import { Tooltip } from '../common/tooltips/tooltip';
 
 class TeamMembersTableRow extends React.Component {
     constructor(props) {

teamized/app/src/components/pages/teamlist.jsx

@@ -10,7 +10,8 @@ import { waitingAlert } from '../../utils/alerts.ts';
 import * as Teams from '../../utils/teams';
 import * as Navigation from '../../utils/navigation.tsx';
 import * as Dashboard from '../common/dashboard.tsx';
-import { IconTooltip } from '../tooltips.jsx';
+
+import { IconTooltip } from '../common/tooltips/iconTooltip';
 
 class TeamTableRow extends React.Component {
     constructor(props) {

teamized/app/src/components/pages/todo.jsx

@@ -11,7 +11,8 @@ import * as Dashboard from '../common/dashboard.tsx';
 import * as ToDo from '../../utils/todo.ts';
 import * as Navigation from '../../utils/navigation.tsx';
 import * as Cache from '../../utils/cache.ts';
-import { IconTooltip, Tooltip } from '../tooltips.jsx';
+import { IconTooltip } from '../common/tooltips/iconTooltip';
+import { Tooltip } from '../common/tooltips/tooltip';
 
 class ListViewItem extends React.Component {
     constructor(props) {

teamized/app/src/components/pages/workingtime.jsx

@@ -12,14 +12,14 @@ import * as Navigation from '../../utils/navigation.tsx';
 import * as WorkingTime from '../../utils/workingtime.ts';
 import * as Cache from '../../utils/cache.ts';
 import * as Dashboard from '../common/dashboard.tsx';
-import { IconTooltip } from '../tooltips.jsx';
 import * as Stats from '../../utils/workingtimestats.ts';
 import {
     roundDays,
     localInputFormat,
     ms2HoursMinutesSeconds,
     seconds2HoursMinutesSeconds,
 } from '../../utils/datetime.ts';
+import { IconTooltip } from '../common/tooltips/iconTooltip';
 
 class WorkSessionTableRow extends React.Component {
     constructor(props) {