JSPM

  • Created
  • Published
  • Downloads 30313
  • Score
    100M100P100Q153142F

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

Package Exports

  • @gluestack-ui/tooltip
  • @gluestack-ui/tooltip/lib/commonjs/index.js
  • @gluestack-ui/tooltip/lib/module/index.js

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.