Question 250692 in Html Question posted in
Some basic documentation can be found here.

Html – Embed image/icon within Tooltip ChakraUI or CSS in React

I am attempting to embed an image/icon into my tooltip via the Chakra UI library. So that it is more that just the label showing, I want the MdWarningAmber Icon to show in the tooltip rather than next to the button to hover over

https://chakra-ui.com/docs/components/tooltip/usage

<Tooltip label=' Access to this page is exclusively available to registered users.'
    className="tooltip"
    aria-label="tooltip"
    placement='right-end'
    closeDelay={100}
    bg={"white"}
    textColor={"#8e8e8e"}>
     <span>
      <Icon as={MdWarningAmber} color={"#8e8e8e"} />
         <Button>
             Hover Over Me
         </Button>
     </span>
</Tooltip>

I have tried placing a with the Icon inside but that doesnt seem to help

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Workaround is using the <Popover> element and adding trigger="hover"


  2. 0

    As the documentation mentions:

    label

    Description: The label of the tooltip
    Type: ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor> | ReactFragment | ReactPortal

    <Tooltip label={(<div>
  <WarnIcon />
  <p>Access to this page is exclusively available to registered users.</p>
</div>)}
    className="tooltip"
    aria-label="tooltip"
    placement='right-end'
    closeDelay={100}
    bg={"white"}
    textColor={"#8e8e8e"}>
     <span>
      <Icon as={MdWarningAmber} color={"#8e8e8e"} />
         <Button>
             Hover Over Me
         </Button>
     </span>
</Tooltip>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search