diff --git a/stories/Components/Tooltip.stories.tsx b/stories/Components/Tooltip.stories.tsx index 3222dd23..65a143c0 100644 --- 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) => , + render: (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 index 197d4542..cdb9f807 100644 --- 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. - -
- - - Accessibiltà: 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 <span>) possano essere resi attivabili tramite - l’attributo - tabindex="0", 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. - - +
+ + + Accessibilità + + + 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 <span>) possano essere resi attivabili tramite + l’attributo + tabindex="0", 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. + +
+ ### Esempio interattivo