Html – :hover not working, ive tried with everything i can think of

I have a Container in a div with WoodMineOwned id, when my mouse hovers over it i want the Wood ToolTip to show but it wont

    HTML:

    <!-- TAB 1 ~Mines~-->
        <div class="container">
        <div class="tab">
            ~<span class="textCenter">Buy Mines</span>~
            <div class="tabContent tab1">
                <h2 class="textCenter">Buy Menu</h2>
    
                <div class="mines container2">
                    <div class="minesContainer">
                        <div class="minesOwned" id="woodMineOwned">Wood Mine: 0</div>
                        
                        <div class="minesOwned" id="stoneMineOwned">Stone Mine: 0</div>
    
                        <div class="minesOwned" id="coalMineOwned">Coal Mine: 0</div>
    
                        <div class="minesOwned" id="ironMineOwned">Iron Mine: 0</div>
    
                        <div class="minesOwned" id="silverMineOwned">Silver Mine: 0</div>
    
                        <div class="minesOwned" id="goldMineOwned">Gold Mine: 0</div>
    
                        <div class="minesOwned" id="diamondMineOwned">Diamond Mine: 0</div>
    
                    </div>
                </div>
    
          </div>
      </div>
      </div>


       <div>
          <!-- Wood ToolTip -->
          <div class="tipWoodMine" id="tipWoodMine" style="display: none;">
              <h3>Wood Mine</h3>
              <p>Cost: 100 Wood | 50 Stone <span style="color: red">(+7%)</span></p>
              <p>Wood Per Second: 0 <span style="color: green">(+1)</span></p>
              <p>Owned: 0 <span style="color: green">(+1)</span></p>
          </div>
        </div>


    CSS:

    .container {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
    }
    .tab {
       position: relative;
       flex: 1;
       border: 1px solid #ccc;
       background-color: #f9f9f9;
       cursor: pointer;
       padding: 10px;
       text-align: center;
    }
    .tabContent {
        display: none;
        position: absolute;
        top: 100%;
        width: 392%;
        height: 300px;
        background-color: #f9f9f9;
        padding: 10px;
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    
    }
    .tab:hover .tabContent {
        display: block;
    }
    .minesOwned {
        font-size: 75%;
        flex-basis: 30%;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    }
    .textCenter {
        text-align: center;
    }

    /* Tool Tips */
    .tipWoodMine {
        background-color: #f9f9f9;
        margin: 0 auto;
        width: 40%;
        height: 155px; 
        text-align: center; 
        border-radius: 10px;
        border: 1px solid grey;
    }

    #woodMineOwned:hover ~ .tipWoodMine {
        display: "block";
    }

thats all the code i think is needed to show sorry for it being long: o want the tooltip to show when i hover over the wood mine but it just wont appear as a block. Is it because the WoodMine Owned is in a container and the ToolTip that i made is not in the container div?