Tooltip

import { Tooltip, ButtonIcon, Stack, spacing} from 'sxa-ui'
import {
  RiInformationLine,
} from '@remixicon/react'

function Demo() {
  return (
    <Stack justifyContent={Stack.justifyContent.end}>
      <Tooltip trigger={
        <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
      }>
        This is some text to give a little help from my friend
      </Tooltip>
    </Stack>
  )
}

export default Demo

import { Tooltip, ButtonIcon, Stack, spacing} from 'sxa-ui'
import {
  RiInformationLine,
} from '@remixicon/react'

function Demo() {
  return (
    <Stack direction={Stack.directions.vertical}>
      <Stack justifyContent={Stack.justifyContent.spaceBetween} gap={spacing.xs}>
        <Tooltip alignment={Tooltip.alignments.bottomStart} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.bottom} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.bottomEnd} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
      </Stack>
      <Stack justifyContent={Stack.justifyContent.spaceBetween} gap={spacing.xs}>
        <Tooltip alignment={Tooltip.alignments.rightStart} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.leftStart} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
      </Stack>
      <Stack justifyContent={Stack.justifyContent.spaceBetween} gap={spacing.xs}>
        <Tooltip alignment={Tooltip.alignments.right} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.left} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
      </Stack>
      <Stack justifyContent={Stack.justifyContent.spaceBetween} gap={spacing.xs}>
        <Tooltip alignment={Tooltip.alignments.rightEnd} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.leftEnd} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
      </Stack>
      <Stack justifyContent={Stack.justifyContent.spaceBetween} gap={spacing.xs}>
        <Tooltip alignment={Tooltip.alignments.topStart} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.top} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
        <Tooltip alignment={Tooltip.alignments.topEnd} trigger={
          <ButtonIcon tiny variant={ButtonIcon.variants.ghost} icon={RiInformationLine} />
        }>
          This is some text to give a little help from my friend
        </Tooltip>
      </Stack>

    </Stack>
  )
}

export default Demo