docs: fix callout bug

italia · Feb 3, 2025 · dd39a58 · dd39a58
1 parent e4367fd
commit dd39a58
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/stories/Components/Tooltip.stories.tsx b/stories/Components/Tooltip.stories.tsx
@@ -207,7 +207,7 @@ const EsempiInterattiviWithHooks = ({ placement, text }: TooltipProps) => {
 };
 
 export const EsempiInterattivi: Story = {
-  render: (placement, text) => <EsempiInterattiviWithHooks {...placement} {...text} />,
+  render: (args) => <EsempiInterattiviWithHooks {...args} />,
   parameters: {
     layout: 'centered'
   },
@@ -219,6 +219,9 @@ export const EsempiInterattivi: Story = {
     placement: {
       control: 'select',
       options: ['top', 'bottom', 'left', 'right']
+    },
+    text: {
+      control: 'text'
     }
   }
 };
diff --git a/stories/Documentation/Tooltip.mdx b/stories/Documentation/Tooltip.mdx
@@ -10,30 +10,29 @@ import * as TooltipStories from '../Components/Tooltip.stories';
 ## Documentazione ed esempi per aggiungere tooltip personalizzati
 
 I Tooltip di reactstrap con CSS e JavaScript utilizzano CSS3 per animazioni e la libreria `Popper.js` per il corretto posizionamento.
-
-<div className='docs'>
-  <Callout color='success'>
-    <CalloutTitle>
-      Accessibiltà: I tooltip funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva.
-    </CalloutTitle>
-    <CalloutText>
-      È importante aggiungere tooltip solo ad elementi HTML che sono tradizionalmente attivabili da tastiera e
-      interattivi (link, bottoni, o elementi di form).
-    </CalloutText>
-    <CalloutText>
-      Sebbene arbitrariamente gli elementi HTML (come <Code>&lt;span&gt;</Code>) possano essere resi attivabili tramite
-      l’attributo
-      <Code>tabindex="0"</Code>, ciò aggiungerà interruzioni di tabulazioni potenzialmente dannose per gli utenti che usano
-      la tastiera per navigare. Inoltre, la maggior parte delle tecnologie assistive in questa situazione non annuncia il
-      tooltip come ci si potrebbe invece attendere.
-    </CalloutText>
-    <CalloutText>
-      Infine, non fare affidamento esclusivamente sull’evento “mouse over” come innesco del tooltip, in quanto ciò
-      renderà impossibile l’attivazione per gli utenti che usano la tastiera per navigare.
-    </CalloutText>
-  </Callout>
+<div className="docs">
+    <Callout color="success">
+        <CalloutTitle>
+            <span className="text">Accessibilità</span>
+        </CalloutTitle>
+        <CalloutText>
+          I tooltip funzionano sia con la tastiera che per gli utenti dotati di tecnologia assistiva.
+          È importante aggiungere tooltip solo ad elementi HTML che sono tradizionalmente attivabili da tastiera e
+          interattivi (link, bottoni, o elementi di form).
+
+          Sebbene arbitrariamente gli elementi HTML (come <Code>&lt;span&gt;</Code>) possano essere resi attivabili tramite
+          l’attributo
+          <Code>tabindex="0"</Code>, ciò aggiungerà interruzioni di tabulazioni potenzialmente dannose per gli utenti che usano
+          la tastiera per navigare. Inoltre, la maggior parte delle tecnologie assistive in questa situazione non annuncia il
+          tooltip come ci si potrebbe invece attendere.
+
+          Infine, non fare affidamento esclusivamente sull’evento “mouse over” come innesco del tooltip, in quanto ciò
+          renderà impossibile l’attivazione per gli utenti che usano la tastiera per navigare.
+        </CalloutText>
+    </Callout>
 </div>
 
+
 ### Esempio interattivo
 
 <Canvas of={TooltipStories.EsempiInterattivi} />