CODEWITHSUNDEEP
htmlcssreactjs
Wasivis
Wasivis

Reputation: 81

Tooltip help in React

I'm new to React and I'm finishing my first small tutorial project, a Pokedex using the PokeApi. I have two questions regarding the same thing:

I added a tooltip that displays Pokemon marked as favorite when you hover over the heart emoji (top right), but the most I can figure out is how to display them as concatenated strings. Is there a way to format it so it shows as a list or at least as strings separated by a comma?

The second question, is there a way for the tooltip not to show (or to show a default message that says "You don't have any favorite Pokemon yet") when the list is empty and you hover over the heart?

Here are the relevant snippets, but I'll link the sandbox too!

React:

const Navbar = () => {
    const { favoritePokemon } = useContext(FavoriteContext);

    const defaultMessage = "You don't have any favorite Pokemon yet";
    const tooltiptext =
        favoritePokemon === null ? defaultMessage : favoritePokemon;

    return (
        <nav>
            <div />
            <div className="logo">
                <Logo />
            </div>
            <div className="favorites">
                Favorites
                <div className="heart-tooltip">
                    <span role="img" aria-label="xxxx">
                        &#10084;&#65039;
                    </span>
                    <span className="tooltip-text">{tooltiptext}</span>
                </div>
                <div className="favorite-number">{favoritePokemon.length}</div>
            </div>
        </nav>
    );
};

CSS:

.heart-tooltip .tooltip-text {
    visibility: hidden;
    width: 90px;
    background-color: #363636;
    color: #fff;
    text-align: center;
    border-radius: 12px;
    padding: 5px;
    font-size: 20px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -45px;
    opacity: 0;
    transition: opacity 2s;
    text-transform: capitalize;
}

.heart-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

https://codesandbox.io/s/heuristic-darkness-kyule7

If I'm missing something to make it clearer, let me know!

Thank you so much in advance :).

Upvotes: 0

Views: 377

Answers (1)

Pranay Binju
Pranay Binju

Reputation: 621

As your favoritePokemon is an array, you can use Array.prototype.join to convert array items to a string. For showing default tooltip, you can add a check that if favoritePokemon.length === 0 ? defaultMessage : favoritePokemon.join(", ");. Have updated this in your sandbox.

Upvotes: 1

Related Questions