如何使用三元运算符使用反应？

Question

i want to display a popup like in picture below when hovering on buttons using react and typescript.

below is my code,

function Parent () {
    return (
        <ItemsList>
            {filtereditems.map(item => (
                <Item 
                    key={item.id}
                    item={item}
                />
            ))}
        </ItemsList>
    );
}


const ItemsList = styled.div`
    display: flex;
    flex-direction: row;  
`;


function Item ({item}: Props) { //this displays the button like components in picture
    return(
        <Wrapper>
            {getShortName(item)}
        </Wrapper>
    );
}


const Wrapper = styled(Icon)`
    z-index: 1;
    font-size: 14px;
`;


 const Icon = styled.div<Props>`
     width: ${p => (p.size ? `${p.size}px` : '20px')};
     height: ${p => (p.size ? `${p.size}px` : '20px')};
     flex-shrink: 0;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
`;

Now when i hover on Item component i want to get the popup like in picture above. could someone help me with this. thanks.

Answer 1

Not sure where the content of the popup should come (I assume getShortName() just shows the button content), however, with the solution below you can solve the problem whatever structure it has. If you have a span or whatever inside as the popup/tooltip text, it can be solved like:

function Item ({item}: Props) { //this displays the button like components in picture
    return(
        <Wrapper>
            {getShortName(item)}
            <span id='popupOrTooltip'>Whatever you like</span>
        </Wrapper>
    );
}


const Wrapper = styled(Icon)`
    z-index: 1;
    font-size: 14px;
`;


 const Icon = styled.div<Props>`
     width: ${p => (p.size ? `${p.size}px` : '20px')};
     height: ${p => (p.size ? `${p.size}px` : '20px')};
     flex-shrink: 0;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
     & > span {
       opacity: 0;
       visibility: hidden;
     }
     &:hover > span {
       opacity: 1;
       visibility: visible;
     }

`;

The & operator is from SASS/SCSS, which means the parent selector, :hover is the psuedo for if the selector's element is hovered, > means direct child(ren).