Skip to content

No style on tooltip when rendered in React Fragment #643

Closed
@mawilmouth

Description

@mawilmouth

When rendering a tooltip next to the target element in a React Fragment, the tooltip is not styled. Upon hovering, the tooltip does appear but does not have any styles applied to it. When I wrapped them in a div, it worked fine. I understand that this may not be a huge issue but I do think that a Fragment wrapper should be handled.

This does not work

<React.Fragment>
   <div
     data-tip
     data-for="githubTest"
     data-testid="ownershipIconContainer"
   >
        <p>hover me</p>
   </div>
   <ReactTooltip
     type="dark"
     effect="solid"
     place="top"
     id="githubTest"
   >
        <p data-testid="ownershipTipText">{ownershipText}</p>
   </ReactTooltip>
</React.Fragment>

This works

<div>
   <div
     data-tip
     data-for="githubTest"
     data-testid="ownershipIconContainer"
   >
        <p>hover me</p>
   </div>
   <ReactTooltip
     type="dark"
     effect="solid"
     place="top"
     id="githubTest"
   >
        <p data-testid="ownershipTipText">{ownershipText}</p>
   </ReactTooltip>
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions