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: 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.
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>
Post a Comment for "Display Element Over Another Div With Hidden Overflow"