Как использовать тернарный оператор с помощью React?

Question

Я хочу отображать всплывающее окно, как на картинке ниже, при наведении курсора на кнопки с помощью реакции и машинописного текста.

введите описание изображения здесь

ниже - мой код,

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;
`;

Теперь, когда я наводю курсор на компонент Item, я хочу получить всплывающее окно, как на картинке выше. может кто-нибудь помочь мне с этим. спасибо.

Answer 1

Не уверен, где должно находиться содержимое всплывающего окна (я предполагаю, что getShortName() просто показывает содержимое кнопки), однако с помощью приведенного ниже решения вы можете решить проблему независимо от его структуры. Если у вас есть span или что-то еще внутри в качестве текста всплывающего окна / всплывающей подсказки, его можно решить следующим образом:

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;
     }

`;

Оператор & взят из SASS / S CSS, что означает родительский selector, :hover - это псевдоним, если элемент селектора завис, > означает прямой дочерний элемент (ren).