Tooltip

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-basic (Apache-2.0).4import { CircleInfo } from "@gravity-ui/icons";5import * as stylex from "@stylexjs/stylex";6import { Button, Tooltip } from "@lenso/ui";7import { useId } from "react";8
9const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 16 } });10
11export function TooltipBasic() {12  const textId = useId();13  const informationId = useId();14  return (15    <Tooltip.Provider delay={0}>16      <div {...stylex.props(styles.row)}>17        <Tooltip>18          <Tooltip.Trigger aria-describedby={textId} render={<Button variant="secondary" />}>19            Hover me20          </Tooltip.Trigger>21          <Tooltip.Portal>22            <Tooltip.Positioner>23              <Tooltip.Popup id={textId}>This is a tooltip</Tooltip.Popup>24            </Tooltip.Positioner>25          </Tooltip.Portal>26        </Tooltip>27        <Tooltip>28          <Tooltip.Trigger29            aria-describedby={informationId}30            render={<Button isIconOnly aria-label="More information" variant="tertiary" />}31          >32            <CircleInfo />33          </Tooltip.Trigger>34          <Tooltip.Portal>35            <Tooltip.Positioner>36              <Tooltip.Popup id={informationId}>More information</Tooltip.Popup>37            </Tooltip.Positioner>38          </Tooltip.Portal>39        </Tooltip>40      </div>41    </Tooltip.Provider>42  );43}

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-placement (Apache-2.0).4import { Button, Tooltip } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { useId } from "react";7import { tokens } from "@lenso/tokens/tokens.stylex.const";8
9const styles = stylex.create({10  grid: { display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 16 },11  center: { display: "flex", alignItems: "center", justifyContent: "center" },12  caption: { fontSize: 14, color: tokens.muted },13  button: { width: "100%" },14});15
16function Placement({ side, label }: { side: "top" | "left" | "right" | "bottom"; label: string }) {17  const id = useId();18  return (19    <Tooltip>20      <Tooltip.Trigger21        delay={0}22        aria-describedby={id}23        render={<Button variant="tertiary" xstyle={styles.button} />}24      >25        {label}26      </Tooltip.Trigger>27      <Tooltip.Portal>28        <Tooltip.Positioner side={side} sideOffset={7}>29          <Tooltip.Popup id={id}>30            <Tooltip.Arrow />31            <p>{label} placement</p>32          </Tooltip.Popup>33        </Tooltip.Positioner>34      </Tooltip.Portal>35    </Tooltip>36  );37}38
39export function TooltipPlacement() {40  return (41    <div {...stylex.props(styles.grid)}>42      <div />43      <Placement side="top" label="Top" />44      <div />45      <Placement side="left" label="Left" />46      <div {...stylex.props(styles.center)}>47        <span {...stylex.props(styles.caption)}>Hover buttons</span>48      </div>49      <Placement side="right" label="Right" />50      <div />51      <Placement side="bottom" label="Bottom" />52      <div />53    </div>54  );55}

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-with-arrow (Apache-2.0).4import { Button, Tooltip } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { useId } from "react";7
8const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 16 } });9
10export function TooltipWithArrow() {11  const arrowId = useId();12  const offsetId = useId();13  return (14    <div {...stylex.props(styles.row)}>15      <Tooltip>16        <Tooltip.Trigger17          delay={0}18          aria-describedby={arrowId}19          render={<Button variant="secondary" />}20        >21          With Arrow22        </Tooltip.Trigger>23        <Tooltip.Portal>24          <Tooltip.Positioner sideOffset={7}>25            <Tooltip.Popup id={arrowId}>26              <Tooltip.Arrow />27              <p>Tooltip with arrow indicator</p>28            </Tooltip.Popup>29          </Tooltip.Positioner>30        </Tooltip.Portal>31      </Tooltip>32      <Tooltip>33        <Tooltip.Trigger34          delay={0}35          aria-describedby={offsetId}36          render={<Button variant="primary" />}37        >38          Custom Offset39        </Tooltip.Trigger>40        <Tooltip.Portal>41          <Tooltip.Positioner sideOffset={12}>42            <Tooltip.Popup id={offsetId}>43              <Tooltip.Arrow />44              <p>Custom offset from trigger</p>45            </Tooltip.Popup>46          </Tooltip.Positioner>47        </Tooltip.Portal>48      </Tooltip>49    </div>50  );51}

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-custom-trigger (Apache-2.0).4import { CircleCheckFill, CircleQuestion } from "@gravity-ui/icons";5import { Avatar, Chip, Tooltip } from "@lenso/ui";6import * as stylex from "@stylexjs/stylex";7import { useId } from "react";8import { tokens } from "@lenso/tokens/tokens.stylex.const";9
10const ping = stylex.keyframes({11  "75%": { transform: "scale(2)", opacity: 0 },12  "100%": { transform: "scale(2)", opacity: 0 },13});14const styles = stylex.create({15  row: { display: "flex", alignItems: "center", gap: 24 },16  profile: { display: "flex", flexDirection: "column", gap: 0, paddingBlock: 4 },17  strong: { fontWeight: 600 },18  email: { fontSize: 12, color: tokens.muted },19  status: { display: "flex", alignItems: "center", gap: 6 },20  dot: { position: "relative", display: "flex", width: 8, height: 8 },21  pulse: {22    position: "absolute",23    display: "inline-flex",24    width: "100%",25    height: "100%",26    borderRadius: "50%",27    backgroundColor: tokens.success,28    opacity: 0.75,29    animationName: { default: ping, "@media (prefers-reduced-motion: reduce)": "none" },30    animationDuration: "1s",31    animationTimingFunction: "cubic-bezier(0, 0, .2, 1)",32    animationIterationCount: "infinite",33  },34  dotCenter: {35    position: "relative",36    display: "inline-flex",37    width: 8,38    height: 8,39    borderRadius: "50%",40    backgroundColor: tokens.success,41  },42  iconBackground: { borderRadius: "50%", backgroundColor: tokens.accentSoft, padding: 8 },43  icon: { color: tokens.accentSoftForeground },44  help: { maxWidth: 320, paddingInline: 4, paddingBlock: 6 },45  helpHeading: { marginBottom: 4, fontWeight: 600 },46  helpText: { fontSize: 14, color: tokens.muted },47});48
49export function TooltipCustomTrigger() {50  const avatarId = useId();51  const statusId = useId();52  const infoId = useId();53  return (54    <div {...stylex.props(styles.row)}>55      <Tooltip>56        <Tooltip.Trigger delay={0} aria-label="User avatar" aria-describedby={avatarId}>57          <Avatar size="sm">58            <Avatar.Image59              alt="Jane Doe"60              src="https://img.heroui.chat/image/avatar?w=400&h=400&u=4"61            />62            <Avatar.Fallback>JD</Avatar.Fallback>63          </Avatar>64        </Tooltip.Trigger>65        <Tooltip.Portal>66          <Tooltip.Positioner sideOffset={7}>67            <Tooltip.Popup id={avatarId}>68              <Tooltip.Arrow />69              <div {...stylex.props(styles.profile)}>70                <p {...stylex.props(styles.strong)}>Jane Doe</p>71                <p {...stylex.props(styles.email)}>jane@example.com</p>72              </div>73            </Tooltip.Popup>74          </Tooltip.Positioner>75        </Tooltip.Portal>76      </Tooltip>77      <Tooltip>78        <Tooltip.Trigger delay={0} aria-label="Status chip" aria-describedby={statusId}>79          <Chip color="success">80            <CircleCheckFill width={12} />81            <Chip.Label>Active</Chip.Label>82          </Chip>83        </Tooltip.Trigger>84        <Tooltip.Portal>85          <Tooltip.Positioner>86            <Tooltip.Popup id={statusId} xstyle={styles.status}>87              <span {...stylex.props(styles.dot)} aria-hidden="true">88                <span {...stylex.props(styles.pulse)} />89                <span {...stylex.props(styles.dotCenter)} />90              </span>91              <p>Jane is currently online</p>92            </Tooltip.Popup>93          </Tooltip.Positioner>94        </Tooltip.Portal>95      </Tooltip>96      <Tooltip>97        <Tooltip.Trigger delay={0} aria-label="Info icon" aria-describedby={infoId}>98          <div {...stylex.props(styles.iconBackground)}>99            <CircleQuestion {...stylex.props(styles.icon)} />100          </div>101        </Tooltip.Trigger>102        <Tooltip.Portal>103          <Tooltip.Positioner sideOffset={7}>104            <Tooltip.Popup id={infoId}>105              <Tooltip.Arrow />106              <div {...stylex.props(styles.help)}>107                <p {...stylex.props(styles.helpHeading)}>Help Information</p>108                <p {...stylex.props(styles.helpText)}>109                  This is a helpful tooltip with more detailed information about this feature.110                </p>111              </div>112            </Tooltip.Popup>113          </Tooltip.Positioner>114        </Tooltip.Portal>115      </Tooltip>116    </div>117  );118}

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-render-function (Apache-2.0).4import { CircleInfo } from "@gravity-ui/icons";5import { Button, Tooltip } from "@lenso/ui";6import * as stylex from "@stylexjs/stylex";7import { useId } from "react";8
9const styles = stylex.create({ row: { display: "flex", alignItems: "center", gap: 16 } });10
11export function RenderFunction() {12  const textId = useId();13  const informationId = useId();14  return (15    <div {...stylex.props(styles.row)}>16      <Tooltip>17        <Tooltip.Trigger18          delay={0}19          aria-describedby={textId}20          render={<Button variant="secondary" />}21        >22          Hover me23        </Tooltip.Trigger>24        <Tooltip.Portal>25          <Tooltip.Positioner>26            <Tooltip.Popup id={textId} render={(props) => <div {...props} data-custom="foo" />}>27              <p>This is a tooltip</p>28            </Tooltip.Popup>29          </Tooltip.Positioner>30        </Tooltip.Portal>31      </Tooltip>32      <Tooltip>33        <Tooltip.Trigger34          delay={0}35          aria-describedby={informationId}36          render={<Button isIconOnly aria-label="More information" variant="tertiary" />}37        >38          <CircleInfo />39        </Tooltip.Trigger>40        <Tooltip.Portal>41          <Tooltip.Positioner>42            <Tooltip.Popup43              id={informationId}44              render={(props) => <div {...props} data-custom="foo" />}45            >46              <p>More information</p>47            </Tooltip.Popup>48          </Tooltip.Positioner>49        </Tooltip.Portal>50      </Tooltip>51    </div>52  );53}

1"use client";2
3// Adapted from HeroUI v3.2.6 tooltip-custom-styles (Apache-2.0).4import { Button, Tooltip } from "@lenso/ui";5import * as stylex from "@stylexjs/stylex";6import { useId } from "react";7import { tokens } from "@lenso/tokens/tokens.stylex.const";8
9const styles = stylex.create({10  popup: {11    borderRadius: tokens.radiusLg,12    borderWidth: 1,13    borderStyle: "solid",14    borderColor: "color-mix(in oklab, var(--border) 80%, transparent)",15    backgroundColor: tokens.surface,16    paddingInline: 10,17    paddingBlock: 4,18    fontSize: 12,19    color: tokens.foreground,20    boxShadow: "0 1px 2px 0 rgb(0 0 0 / 0.05)",21  },22});23
24export function CustomStyles() {25  const id = useId();26  return (27    <Tooltip>28      <Tooltip.Trigger delay={0} aria-describedby={id} render={<Button variant="secondary" />}>29        Share link30      </Tooltip.Trigger>31      <Tooltip.Portal>32        <Tooltip.Positioner>33          <Tooltip.Popup id={id} xstyle={styles.popup}>34            <p>Copied to clipboard</p>35          </Tooltip.Popup>36        </Tooltip.Positioner>37      </Tooltip.Portal>38    </Tooltip>39  );40}