How can I change the position of a hover card?-CodePudding

I am making a game that uses a hover card to show the cost of the upgrade. The hover card shows up on the bottom, but I need it to show up on the right of the button. Please help!

<html>
    <head>
        <style>
            body {
                background-image: url(https://cutewallpaper.org/21/snow-camo-background/Camo-download-free-clipart-with-a-transparent-background-.png);
                background-size: 150%;
            }

            button {
                margin-top:5px;
            }

            .has-hover-card {
                display: inline-block;
                position: relative;
            }

            .hover-card {
                display: none;
                background: #ddd;
                border: 1px solid black;
                padding: 10px;
                position: absolute;
                top: 1em;
                left: 0;
                white-space: nowrap;
            }

            .has-hover-card:hover .hover-card {
                display: inline-block;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
            <button><span class="has-hover-card">Faster engineering
      <span class="hover-card">
        Cost: 100$<br />
        Production ^ 5%<br />
      </span>
    </span>
    </button>
    </body>
</html>

CodePudding user response：

Just simply change your top and left values for your absolute positioning on your .hover-card. Feel free to change around to get in the position you desire.

<html>
    <head>
        <style>
            body {
                background-image: url(https://cutewallpaper.org/21/snow-camo-background/Camo-download-free-clipart-with-a-transparent-background-.png);
                background-size: 150%;
            }

            button {
                margin-top:5px;
            }

            .has-hover-card {
                display: inline-block;
                position: relative;
            }

            .hover-card {
                display: none;
                background: #ddd;
                border: 1px solid black;
                padding: 10px;
                position: absolute;
                top: -13px;
                left: 7.5rem;
                white-space: nowrap;
            }

            .has-hover-card:hover .hover-card {
                display: inline-block;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
            <button><span class="has-hover-card">Faster engineering
      <span class="hover-card">
        Cost: 100$<br />
        Production ^ 5%<br />
      </span>
    </span>
    </button>
    </body>
</html>