Inline Definition

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/inline-definition

NPM

npm install @leafygreen-ui/inline-definition

Example

<H2>
  <InlineDefinition definition={shardDefinition}>Shard</InlineDefinition> your
  cluster
</H2>

Output HTML

<h2 class="leafygreen-ui-1xwhtk1">
  <span class="leafygreen-ui-1eprrtj" aria-describedby="tooltip-1">Shard</span>
  your cluster
</h2>
<div>
  <div class="leafygreen-ui-10b9mvh">
    <div role="tooltip" id="tooltip-27" class="leafygreen-ui-10d84ei">
      <div class="leafygreen-ui-qlb2bl">
        <div class="leafygreen-ui-3uslxw"></div>
      </div>
      <p class="leafygreen-ui-1s8990i">
        Sharding is a method for horizontally scaling across multiple replica
        sets by breaking up large datasets (e.g. partitioning) into smaller
        parts. Sharding is native to MongoDB.
      </p>
    </div>
  </div>
</div>

Properties

Prop	Type	Description
`definition`	Required `React.ReactNode`	Content that describes the term. Will appear inside Tooltip.
`children`	`string`	Text that will appear underlined
`className`	`string`	className will be applied to the trigger element

Any other properties will be spread on the Tooltip element

Current Tags

2.0.2 ... latest (3 months ago)

7 Versions

2.0.2 ... 3 months ago
2.0.1 ... 3 months ago
2.0.0 ... 3 months ago
1.0.3 ... 4 months ago
1.0.2 ... 4 months ago
1.0.1 ... 4 months ago
1.0.0 ... 4 months ago