There are 2 required props: short and full values. The component will make equality check and tooltip will be shown in the case of short and full values aren't equal.

<div>
  <MoreDetails full="10.33" short="10.33" />
  <br />
  <MoreDetails full="10.364846" short="10.36" />
</div>

Sizes

size property is the same as in BodyText component. It will be automatically passed to BodyText component inside the MoreDetails component and icon will change it's size accordingly.

<div>
  <MoreDetails full="10.326546" short="10.33" size="xsmall" />
  <br />
  <MoreDetails full="10.326546" short="10.33" size="small" />
  <br />
  <MoreDetails full="10.326546" short="10.33" size="medium" />
  <br />
  <MoreDetails full="10.326546" short="10.33" size="large" />
</div>

Tooltip Direction

Tooltip direction can be passed by direction property. It accepts all the values as Tooltip components direction property.

<div>
  <MoreDetails full="10.326546" short="10.33" direction="r" />
  <br />
  <MoreDetails full="10.364846" short="10.3648" direction="bottom" />
</div>

ClassNames

Each element inside the component has its own className.

  • className prop is for wrapper Stack element,
  • labelClassName prop is for BodyText element,
  • iconClassName props is for wrapper of Icon.
<div>
  <MoreDetails full="10.326546" short="10.33" className="m-b-1" />
  <br />
  <MoreDetails full="10.326546" short="10.33" labelClassName="c-blue-300" />
  <br />
  <MoreDetails full="10.326546" short="10.33" iconClassName="m-l-4" />
</div>

Importing

import { MoreDetails } from "@servicetitan/design-system"