The Tooltip component in goobs-frontend is a customizable and styled version of the Material-UI Tooltip component. It provides a way to display informative text when users hover over, focus on, or tap an element.

To use the Tooltip component in your project, import it from the goobs-frontend package:

import { StyledTooltip } from 'goobs-frontend';

Here's a basic example of how to use the Tooltip component:

import React from 'react';
import { StyledTooltip, Button } from 'goobs-frontend';

const TooltipExample: React.FC = () => {
  return (
    <StyledTooltip
      title="This is a tooltip"
      tooltipcolor="black"
      tooltipplacement="top"
      offsetX={0}
      offsetY={0}
    >
      <Button>Hover over me</Button>
    </StyledTooltip>
  );
};

export default TooltipExample;

The Tooltip component accepts the following props:

• title: string | React.ReactElement (required) - The content to be displayed in the tooltip.
• tooltipcolor: string (required) - The background color of the tooltip.
• tooltipplacement: 'left' | 'right' | 'top' | 'bottom' (required) - The placement of the tooltip relative to the target element.
• offsetX: number (required) - The horizontal offset of the tooltip.
• offsetY: number (required) - The vertical offset of the tooltip.

In addition to these custom props, the Tooltip component also accepts all the props from the Material-UI Tooltip component.

1. Customizable Appearance: The Tooltip component allows you to customize the background color, font size, font family, and padding of the tooltip.
2. Placement Options: You can control the placement of the tooltip relative to the target element using the tooltipplacement prop.
3. Offset Positioning: The offsetX and offsetY props allow you to fine-tune the position of the tooltip by specifying horizontal and vertical offsets.
4. Accessibility: The Tooltip component is designed with accessibility in mind, providing appropriate ARIA attributes and keyboard navigation support.

The Tooltip component is built on top of the Material-UI Tooltip component and is styled using the styled function from Material-UI. The component applies custom styles to the tooltip content and arrow based on the provided props.

Here's an example of how the Tooltip component is styled:

const StyledTooltip = styled(
  ({ className, tooltipplacement, offsetX, offsetY, ...props }: CustomTooltipProps) => (
    <Tooltip
      {...props}
      classes={{ popper: className }}
      placement={tooltipplacement}
      PopperProps={{
        popperOptions: {
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [offsetX, offsetY],
              },
            },
          ],
        },
      }}
    />
  )
)(({ tooltipcolor }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: tooltipcolor,
    fontSize: '16px',
    fontFamily: 'Merriweather',
    fontWeight: 400,
    padding: '5px 8px',
  },
  [`& .${tooltipClasses.arrow}`]: {
    color: tooltipcolor,
  },
}));

You can render custom content inside the tooltip by passing a React element to the title prop:

import React from 'react';
import { StyledTooltip, Typography } from 'goobs-frontend';

const TooltipExample: React.FC = () => {
  return (
    <StyledTooltip
      title={
        <div>
          <Typography fontvariant="merrih6" text="Custom Tooltip" />
          <Typography fontvariant="merriparagraph" text="This is a tooltip with custom content." />
        </div>
      }
      tooltipcolor="black"
      tooltipplacement="top"
      offsetX={0}
      offsetY={0}
    >
      <Button>Hover over me</Button>
    </StyledTooltip>
  );
};

export default TooltipExample;

You can control the visibility of the tooltip programmatically by using the open prop:

import React, { useState } from 'react';
import { StyledTooltip, Button } from 'goobs-frontend';

const TooltipExample: React.FC = () => {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <div>
      <StyledTooltip
        title="Controlled Tooltip"
        tooltipcolor="black"
        tooltipplacement="top"
        offsetX={0}
        offsetY={0}
        open={open}
      >
        <Button onClick={handleClick}>Click to toggle tooltip</Button>
      </StyledTooltip>
    </div>
  );
};

export default TooltipExample;

1. Concise and Informative: Keep the tooltip content concise and informative, providing clear and helpful information to users.
2. Placement: Choose the appropriate placement for the tooltip based on the context and the available space around the target element.
3. Accessibility: Ensure that the tooltip is accessible by providing alternative text for screen readers and considering keyboard navigation.
4. Styling: Use consistent styling for tooltips throughout your application to maintain a cohesive user experience.
5. Performance: Be mindful of the performance impact when rendering complex content inside tooltips, especially if multiple tooltips are used.

To ensure that the Tooltip component is accessible, consider the following guidelines:

1. ARIA Attributes: The Tooltip component automatically applies appropriate ARIA attributes, such as aria-describedby, to associate the tooltip with the target element.
2. Keyboard Navigation: Users can navigate to and interact with the tooltip using keyboard commands, such as the Tab key and Enter key.
3. Alternative Text: Provide alternative text for any visual elements or icons used within the tooltip to ensure that the information is conveyed to screen reader users.

1. Tooltip Not Showing: Ensure that the title prop is properly set and contains the desired content. Check if the target element is correctly wrapped by the Tooltip component.
2. Incorrect Placement: Verify that the tooltipplacement prop is set correctly and matches one of the supported values ('left', 'right', 'top', 'bottom'). Adjust the offsetX and offsetY props if necessary to fine-tune the position.
3. Styling Issues: Check the custom styles applied to the Tooltip component and ensure that they are properly scoped and not conflicting with other styles in the application.

• Typography: Can be used to style the text content within the tooltip.
• Button: Commonly used as a target element for tooltips to provide additional information or instructions.

Some potential future enhancements for the Tooltip component could include:

1. Animation Effects: Add configurable animation effects for the tooltip appearance and disappearance to enhance the visual experience.
2. Delay Options: Provide options to control the delay before the tooltip appears and disappears, allowing users to customize the timing.
3. Trigger Modes: Expand the trigger modes beyond hover, focus, and tap to include other interactions like click or custom events.
4. Mobile Optimization: Optimize the tooltip behavior and appearance for mobile devices, considering touch interactions and smaller screen sizes.

These enhancements would further improve the flexibility, usability, and visual appeal of the Tooltip component in future versions of goobs-frontend.