Display Element Over Another Div With Hidden Overflow

I am trying to display a message over another div which has overflow hidden. Here is my code snippet: If I useoverflow-x: hidden, then it hides the tooltip message. But I want it

Solution 1:

Is this what you are looking for?

.player-container {
  background: blue;
}

.msgtooltiptext {
    visibility: visible;
    width: 120px;
    background-color: #fffa84;
    color: #000;
    text-align: center;
    border: solid 2px black;
    padding: 5px 0;
    position: absolute;
    text-transform: capitalize;
    z-index: 1;
    right: -120px;
    top: 50%;
    transform: translateY(-50%);
}

.msgtooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

    
<div class="col-12 col-md-3 bg-white p-0 ">
    <div class="player-container" style="cursor:pointer;position: relative;">
      <div class="row p-2">
        <div class="col-12 col-md-3 order-2 order-md-1">
          <h4># <span class="rank">1</span></h4>
        </div>
        <div class="col-12 col-md-5 order-3 order-md-2">
          <h6 class="playername">player</h6>
          <h6>Points: 0</h6>
        </div>
        <div class="col-12 col-md-4">
          <img class="img-fluid player-character" src="character1.png" alt="Character">
        </div>
        <span class="msgtooltiptext">Tooltip Text</span>
      </div>
    </div>
    <div class="player-container" style="cursor:pointer;position: relative;">
      <div class="row p-2">
        <div class="col-12 col-md-3 order-2 order-md-1">
          <h4># <span class="rank">1</span></h4>
        </div>
        <div class="col-12 col-md-5 order-3 order-md-2">
          <h6 class="playername">player</h6>
          <h6>Points: 0</h6>
        </div>
        <div class="col-12 col-md-4">
          <img class="img-fluid player-character" src="character1.png" alt="Character">
        </div>
        <span class="msgtooltiptext">Tooltip Text</span>
      </div>
    </div>
    <div class="player-container" style="cursor:pointer;position: relative;">
      <div class="row p-2">
        <div class="col-12 col-md-3 order-2 order-md-1">
          <h4># <span class="rank">1</span></h4>
        </div>
        <div class="col-12 col-md-5 order-3 order-md-2">
          <h6 class="playername">player</h6>
          <h6>Points: 0</h6>
        </div>
        <div class="col-12 col-md-4">
          <img class="img-fluid player-character" src="character1.png" alt="Character">
        </div>
        <span class="msgtooltiptext">Tooltip Text</span>
      </div>
    </div>
  </div>

Solution 2:

You need to use absolute position for the tooltip box. You also can manage its position with Left , Right , Top , Bottom properties in CSS syntax.(Or margin-right, ...) if each raw has a tooltip box, you need to wrap each of them into a div.

Solution 3:

I did not find a way to display the message over the div, but used the Bootstrap tooltip serves my purpose for this situation. I used custom CSS to change the tooltip's appearance and JS to show and hide it using a function.

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

body {
  background-color: #573bd6;
}

.scoreboard {
  border: solid 4px black;
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.player-container{
  position:relative;
}

.player-character{
  max-height: 60px;
}

.tooltip .tooltip-arrow:before {
    border-right-color: #fffa84 !important;
}

.tooltip .tooltip-inner {
    background-color: #fffa84 !important;
    color: #000 !important;
}

}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<html>

<head>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


</head>

<body>
    <div class="container-fluid">
        <div class="row">

            <div class="col-4 bg-white p-0 scoreboard">
                <div class="player-container">
                    <div class="row p-2" data-bs-toggle= "tooltip" data-bs-placement="right" title= "message">
                        <div class="col-3">
                            <h4># <span class="rank">1</span></h4>
                        </div>
                        <div class="col-5">
                            <h6 class="playername">player</h6>
                            <h6>Points: 0</h6>
                        </div>
                        <div class="col-4"><img class="img-fluid player-character" src="https://www.giantbomb.com/a/uploads/scale_medium/15/153607/2554997-mario%20hero.jpg" alt="Character"></div>
                    </div>
                  
                </div>
            </div>

            <div class="col-8 bg-primary">

            </div>

        </div>
    </div>

</body>

</html>