Tooltip

function ExampleTooltip() {
  const [idealDirection, setIdealDirection] = React.useState('down');

  return (
    <Flex direction="column" alignItems="center" gap={{ column: 8, row: 0 }}>
      <Flex gap={{ column: 0, row: 4 }}>
        <RadioButton
          checked={idealDirection === 'up'}
          id="up"
          label="Up"
          name="idealDirection"
          onChange={() => setIdealDirection( 'up' )}
          value="up"
        />
        <RadioButton
          checked={idealDirection === 'right'}
          id="right"
          label="Right"
          name="idealDirection"
          onChange={() => setIdealDirection( 'right' )}
          value="right"
        />
        <RadioButton
          checked={idealDirection === 'down'}
          id="down"
          label="Down"
          name="idealDirection"
          onChange={() => setIdealDirection( 'down' )}
          value="down"
        />
        <RadioButton
          checked={idealDirection === 'left'}
          id="left"
          label="Left"
          name="idealDirection"
          onChange={() => setIdealDirection( 'left' )}
          value="left"
        />
      </Flex>
      <Tooltip
        idealDirection={idealDirection}
        inline
        text="Share"
        accessibilityLabel=""
        >
          <IconButton
            accessibilityLabel="Share this Pin"
            bgColor="white"
            icon="share"
            iconColor="darkGray"
            inline
            size="lg"
          />
        </Tooltip>
      </Flex>

  )
}

function SectionsIconButtonDropdownExample() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  return (
    <Box width={600}>
      <Heading accessibilityLevel={4}>Sugar-Free Strawberry-Chocolate Greek Yogurt Bark Three-Step Recipe.
        <Tooltip inline text="More board options" idealDirection="right" accessibilityLabel="">
          <IconButton
            accessibilityControls="sections-dropdown-example"
            accessibilityHaspopup
            accessibilityExpanded={open}
            accessibilityLabel="More board options"
            bgColor="lightGray"
            icon="ellipsis"
            iconColor="darkGray"
            selected={open}
            onClick={ () => setOpen((prevVal) => !prevVal) }
            ref={anchorRef}
            size="sm"
          />
        </Tooltip>
      </Heading>
      {open && (
        <Dropdown id="sections-dropdown-example" anchor={anchorRef.current} onDismiss={() => {setOpen(false)}}>
        <Dropdown.Section label="Board Options">
          <Dropdown.Item
            handleSelect={() => {}}
            option={{ value: "edit", label: "Edit Board" }}
          />
          <Dropdown.Item
            handleSelect={() => {}}
            option={{ value: "share", label: "Share" }}
          />
          <Dropdown.Item
            handleSelect={() => {}}
            option={{ value: "merge", label: "Merge" }}
          />
        </Dropdown.Section>
      </Dropdown>
      )}
    </Box>
  );
}

<Flex gap={{ row: 2, column: 0 }} justifyContent="center" alignItems="center">
    <Text>Enable expanded targeting</Text>
    <Tooltip
      text="Use your Pin to expand your targeting."
      link={
        <Text color="inverse" size="100" weight="bold">
          <Link
            href="https://help.pinterest.com/en/business/article/expanded-targeting"
            target="blank"
          >
            Learn more
          </Link>
        </Text>
      }
    >
      <IconButton
        accessibilityLabel="Additional info."
        bgColor="white"
        icon="info-circle"
        iconColor="darkGray"
        size="sm"
      />
    </Tooltip>
  </Flex>

function ScrollBoundaryContainerExample() {
  const [showModal, setShowModal] = React.useState(false);
  const [alignText, setAlignText] = React.useState('left')
  const MODAL_Z_INDEX = new FixedZIndex(11);

  return (
    <>
      <Box
        display="flex"
        justifyContent="center"
      >
        <Button
          accessibilityLabel="Edit this Pin"
          bgColor="white"
          onClick={() => setShowModal(true)}
          text="Open edit modal"
          size="lg"
        />
      </Box>
      {showModal && (
        <Layer zIndex={MODAL_Z_INDEX}>
          <Modal
            accessibilityModalLabel="Edit Pin"
            heading="Edit"
            size="lg"
            onDismiss={() => setShowModal(false)}
            footer={
              <Box
                flex="grow"
                paddingX={3}
                paddingY={3}
              >
                <Box
                  justifyContent="end"
                  marginStart={-1}
                  marginEnd={-1}
                  marginTop={-1}
                  marginBottom={-1}
                  display="flex"
                  wrap
                >
                  <Box
                    paddingX={1}
                    paddingY={1}
                  >
                    <Button
                      text="Cancel"
                      size="lg"
                      onClick={() => setShowModal(false)}
                    />
                  </Box>
                  <Box
                    paddingX={1}
                    paddingY={1}
                  >
                    <Button
                      text="Save"
                      color="red"
                      size="lg"
                      type="submit"
                      onClick={() => setShowModal(false)}
                    />
                  </Box>
                </Box>
              </Box>
            }
          >
              <Box
                column={12}
                display="flex"
                justifyContent="center"
              >
                <Box column={6} paddingX={4}>
                  <Image
                    alt="Tropic greens: The taste of Petrol and Porcelain | Interior design, Vintage Sets and Unique Pieces agave"
                    color="rgb(231, 186, 176)"
                    naturalHeight={751}
                    naturalWidth={564}
                    src="https://i.ibb.co/7bQQYkX/stock2.jpg"
                  >
                    <Box padding={3}>
                      <Heading
                        align={alignText}
                        color="white"
                        size="600"
                      >
                        Tropic greens: The taste of Petrol and Porcelain
                      </Heading>
                    </Box>
                  </Image>
                </Box>
                <Flex direction="column" gap={{ column: 4, row: 0 }}>
                  <Heading size="400" weight="bold">Text Overlay</Heading>
                  <Text size="300">Add text directly onto your Pin</Text>
                  <Text size="300" weight="bold">Alignment</Text>
                  <Flex>
                    <Tooltip text="Align left">
                      <IconButton
                        accessibilityLabel="Align left"
                        bgColor="white"
                        icon="text-align-left"
                        iconColor="darkGray"
                        onClick={() => setAlignText('left')}
                        size="lg"
                        selected={alignText === 'left'}
                      />
                    </Tooltip>
                    <Tooltip text="Align center">
                      <IconButton
                        accessibilityLabel="Align center"
                        bgColor="white"
                        icon="text-align-center"
                        iconColor="darkGray"
                        onClick={() => setAlignText('center')}
                        size="lg"
                        selected={alignText === 'center'}
                      />
                    </Tooltip>
                    <Tooltip text="Align right">
                      <IconButton
                        accessibilityLabel="Align right"
                        bgColor="white"
                        icon="text-align-right"
                        iconColor="darkGray"
                        onClick={() => setAlignText('right')}
                        size="lg"
                        selected={alignText === 'right'}
                      />
                    </Tooltip>
                  </Flex>
                </Flex>
            </Box>
          </Modal>
        </Layer>
      )}
    </>
  )
}

function ScrollBoundaryContainerExample() {
  const [content, setContent] = React.useState(null);
  const [claimed, setClaimed] = React.useState(null);
  const [device, setDevice] = React.useState(null);

  return (
    <ScrollBoundaryContainer overflow="scrollY" height={200}>
      <Flex width={300} direction="column" gap={{ column: 4, row: 0 }}>
        <Flex direction="column" gap={{ column: 2, row: 0 }}>
          <Flex alignItems="center" gap={{ row: 1, column: 0 }}>
            <Text weight="bold" size="lg">
              Content type
            </Text>
            <Tooltip
              idealDirection="right"
              text="See stats about different types of content created by you and/or others on Pinterest. Filter to get more details on your organic (not an ad) and paid (promoted as an ad) content."
            >
              <IconButton
                accessibilityLabel="Information"
                bgColor="white"
                icon="info-circle"
                iconColor="darkGray"
              />
            </Tooltip>
          </Flex>
          <Box display="flex" direction="column">
          <Box paddingY={1}>
              <RadioButton
                checked={content === "all"}
                id="allcontent"
                label="All"
                name="content"
                onChange={() => setContent( "all" )}
                value="all"
              />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={content === "organic"}
                id="organic"
                label="Organic"
                name="content"
                onChange={() => setContent( "organic" )}
                value="organic"
              />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={content === "paid"}
                id="paid"
                label="Paid and earned"
                name="content"
                onChange={() => setContent( "paid" )}
                value="paid"
              />
            </Box>
          </Box>
        </Flex>
        <Flex direction="column" gap={{ column: 2, row: 0 }}>
          <Flex alignItems="center" gap={{ row: 1, column: 0 }}>
            <Text weight="bold" size="lg">
              Claimed account
            </Text>
            <Tooltip
              idealDirection="right"
              text="See stats for Pins linked to your claimed accounts like websites, Etsy, Instagram or Youtube. The Other Pins category includes Pins you’ve published or saved that don’t link to any of your claimed accounts."
            >
              <Icon
                icon="info-circle"
                accessibilityLabel="Information"
                color="default"
              />
            </Tooltip>
          </Flex>
          <Box display="flex" direction="column">
          <Box paddingY={1}>
            <RadioButton
              checked={claimed === "all"}
              id="allclaimed"
              label="All Pins"
              name="claimed"
              onChange={() => setClaimed( "all" )}
              value="all"
            />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={claimed === "instagram"}
                id="instagram"
                label="Instagram"
                name="claimed"
                onChange={() => setClaimed( "instagram" )}
                value="instagram"
              />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={claimed === "other"}
                id="other"
                label="Other pins"
                name="claimed"
                onChange={() => setClaimed( "other" )}
                value="other"
              />
            </Box>
          </Box>
        </Flex>
        <Flex direction="column" gap={{ column: 2, row: 0 }}>
          <Flex alignItems="center" gap={{ row: 1, column: 0 }}>
            <Text weight="bold" size="lg">
              Device
            </Text>
            <Tooltip
              idealDirection="right"
              text="See stats for the different devices your Pinterest traffic is coming from.">
              <Icon
                icon="info-circle"
                accessibilityLabel="Information"
                color="default"
              />
            </Tooltip>
          </Flex>
          <Box display="flex" direction="column">
          <Box paddingY={1}>
            <RadioButton
              checked={device === "all"}
              id="alldevices"
              label="All"
              name="device"
              onChange={() => setDevice( "all" )}
              value="all"
            />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={device === "mobile"}
                id="mobile"
                label="Mobile"
                name="device"
                onChange={() => setDevice( "mobile" )}
                value="mobile"
              />
            </Box>
            <Box paddingY={1}>
              <RadioButton
                checked={device === "desktop"}
                id="desktop"
                label="Desktop"
                name="device"
                onChange={() => setDevice( "desktop" )}
                value="desktop"
              />
            </Box>
             <Box paddingY={1}>
              <RadioButton
                checked={device === "tablet"}
                id="tablet"
                label="Tablet"
                name="device"
                onChange={() => setDevice( "tablet" )}
                value="tablet"
              />
            </Box>
          </Box>
        </Flex>
      </Flex>
    </ScrollBoundaryContainer>
)}