Display Element Over Another Div With Hidden Overflow

January 03, 2024 Post a Comment

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: 5px0;
    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;
}

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"rel="stylesheet"/><divclass="col-12 col-md-3 bg-white p-0 "><divclass="player-container"style="cursor:pointer;position: relative;"><divclass="row p-2"><divclass="col-12 col-md-3 order-2 order-md-1"><h4># <spanclass="rank">1</span></h4></div><divclass="col-12 col-md-5 order-3 order-md-2"><h6class="playername">player</h6><h6>Points: 0</h6></div><divclass="col-12 col-md-4"><imgclass="img-fluid player-character"src="character1.png"alt="Character"></div><spanclass="msgtooltiptext">Tooltip Text</span></div></div><divclass="player-container"style="cursor:pointer;position: relative;"><divclass="row p-2"><divclass="col-12 col-md-3 order-2 order-md-1"><h4># <spanclass="rank">1</span></h4></div><divclass="col-12 col-md-5 order-3 order-md-2"><h6class="playername">player</h6><h6>Points: 0</h6></div><divclass="col-12 col-md-4"><imgclass="img-fluid player-character"src="character1.png"alt="Character"></div><spanclass="msgtooltiptext">Tooltip Text</span></div></div><divclass="player-container"style="cursor:pointer;position: relative;"><divclass="row p-2"><divclass="col-12 col-md-3 order-2 order-md-1"><h4># <spanclass="rank">1</span></h4></div><divclass="col-12 col-md-5 order-3 order-md-2"><h6class="playername">player</h6><h6>Points: 0</h6></div><divclass="col-12 col-md-4"><imgclass="img-fluid player-character"src="character1.png"alt="Character"></div><spanclass="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.

Baca Juga

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            returnnew 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;
}

}

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet" /><html><head><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"crossorigin="anonymous"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><scriptsrc="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><divclass="container-fluid"><divclass="row"><divclass="col-4 bg-white p-0 scoreboard"><divclass="player-container"><divclass="row p-2"data-bs-toggle= "tooltip"data-bs-placement="right"title= "message"><divclass="col-3"><h4># <spanclass="rank">1</span></h4></div><divclass="col-5"><h6class="playername">player</h6><h6>Points: 0</h6></div><divclass="col-4"><imgclass="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><divclass="col-8 bg-primary"></div></div></div></body></html>

Html5 Guru

Display Element Over Another Div With Hidden Overflow

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Display Element Over Another Div With Hidden Overflow"