JSPM

  • Created
  • Published
  • Downloads 30313
  • Score
    100M100P100Q156341F

A universal headless tooltip component for React Native, Next.js & React

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gluestack-ui/tooltip) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @gluestack-ui/tooltip

    Installation

    To use @gluestack-ui/tooltip, all you need to do is install the @gluestack-ui/tooltip package:

    $ yarn add @gluestack-ui/tooltip
    
    # or
    
    $ npm i @gluestack-ui/tooltip

    Usage

    Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. Here's an example how to use this package to create one:

    import { Root, Content } from '../components/core/tooltip/styled-components';
    import { createTooltip } from '@gluestack-ui/tooltip';
    export const Tooltip = createTooltip({
      Root,
      Content,
    });

    Customizing the tooltip:

    Default styling of all these components can be found in the components/core/tooltip file. For reference, you can view the source code of the styled tooltip components.

    // import the styles
    
    import { Root, Content } from '../components/core/tooltip/styled-components';
    
    // import the createTooltip function
    import { createTooltip } from '@gluestack-ui/tooltip';
    
    // Understanding the API
    export const Tooltip = createTooltip({
      Root,
      Content,
    });
    
    // Using the tooltip component
    export default () => (
      <Tooltip>
        <TooltipContent />
      </Tooltip>
    );

    More guides on how to get started are available here.