u

src/components/article/ArticleTileTab.jsx

@@ -33,22 +33,43 @@ import ArticleLabelTab from './tabs/ArticleLabelTab';
 import ArticleSeoTab from './tabs/ArticleSeoTab';
 import ArticleSettingsTab from './tabs/ArticleSettingsTab';
 import ArticleSupplierTab from './tabs/ArticleSupplierTab';
+import HelpBadge from '../HelpBadge';
 
 const ALWAYS_TABS = [
-  { id: ARTICLE_TAB.history, label: 'History', color: '#fed7aa', Icon: HistoryIcon },
-  { id: ARTICLE_TAB.supplier, label: 'Supplier', color: '#bbf7d0', Icon: LocalShippingIcon },
+  {
+    id: ARTICLE_TAB.history,
+    label: 'History',
+    color: '#fed7aa',
+    Icon: HistoryIcon,
+    help: 'Historie aller Änderungen, Buchungen und Ereignisse zu diesem Artikel',
+  },
+  {
+    id: ARTICLE_TAB.supplier,
+    label: 'Supplier',
+    color: '#bbf7d0',
+    Icon: LocalShippingIcon,
+    help: 'Zugeordnete Lieferanten, Einkaufspreise und Lieferanten-Artikelnummern',
+  },
   {
     id: ARTICLE_TAB.seo,
     label: 'SEO & Beschreibung',
     color: '#99f6e4',
     Icon: ManageSearchIcon,
+    help: 'Shop-Texte, Beschreibungen und Suchmaschinen-Metadaten',
+  },
+  {
+    id: ARTICLE_TAB.label,
+    label: 'Label',
+    color: '#fde68a',
+    Icon: LabelIcon,
+    help: 'Barcode- und Preisetiketten für diesen Artikel gestalten und drucken',
   },
-  { id: ARTICLE_TAB.label, label: 'Label', color: '#fde68a', Icon: LabelIcon },
   {
     id: ARTICLE_TAB.attributes,
     label: 'Attribute und Merkmale',
     color: '#bfdbfe',
     Icon: CategoryIcon,
+    help: 'Zusatzattribute, technische Merkmale und Filtereigenschaften',
   },
 ];
 
@@ -57,6 +78,7 @@ const COMPOUND_TAB = {
   label: 'Compound Editor',
   color: '#e9d5ff',
   Icon: AccountTreeIcon,
+  help: 'Stückliste und Unterartikel für diesen Set-Artikel verwalten',
 };
 
 const SETTINGS_TAB = {
@@ -64,6 +86,7 @@ const SETTINGS_TAB = {
   label: 'Einstellungen',
   color: '#fca5a5',
   Icon: SettingsIcon,
+  help: 'Artikeleinstellungen, Einheiten, Steuersatz und Löschen',
 };
 
 function visibleTabs(article) {
@@ -260,7 +283,15 @@ class ArticleTileTab extends PureComponent {
                   value={row.id}
                   aria-label={row.label}
                   title={row.label}
-                  icon={<Icon sx={{ fontSize: 40 }} />}
+                  icon={
+                    <HelpBadge
+                      title={row.label}
+                      help={row.help}
+                      placement="top"
+                    >
+                      <Icon sx={{ fontSize: 40 }} />
+                    </HelpBadge>
+                  }
                   sx={{
                     minHeight: 56,
                     minWidth: 64,