import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; export const TabsTooltipReactRef: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); const [isBox, setIsBox] = React.useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, tabIndex: string | number ) => { setActiveTabKey(tabIndex); }; const toggleBox = (checked: boolean) => { setIsBox(checked); }; const tooltipRef = React.createRef(); return (
Users} aria-label="Tooltip ref content - users"> Users Containers}> Containers Database}> Database Disabled} isDisabled> Disabled ARIA Disabled} isAriaDisabled> ARIA Disabled ARIA Disabled (Tooltip)} isAriaDisabled ref={tooltipRef} aria-describedby="tooltip-ref1" > ARIA Disabled (Tooltip)
toggleBox(checked)} aria-label="show box variation checkbox" id="toggle-box-tooltip-ref" name="toggle-box-tooltip-ref" />
); };