在另一个带有隐藏溢出的 div 上显示元素 [英] Display Element over another div with hidden overflow

查看：26
本文介绍了在另一个带有隐藏溢出的 div 上显示元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在另一个隐藏溢出的 div 上显示一条消息.这是我的代码片段:

body {背景色:#573bd6；}.记分牌{边框:纯 4px 黑色；最小高度:200px；溢出-y:自动；}.玩家容器{位置:相对；}.玩家角色{最大高度:60px；}.msgtooltiptext {可见性:可见；宽度:120px；背景颜色:#fffa84；颜色:#000；文本对齐:居中；边框:实心 2px 黑色；填充:5px 0;位置:绝对；文本转换:大写；z-索引:1；右:-140px；顶部:50%；变换:translateY(-50%);}.msgtooltiptext::after {内容: "";位置:绝对；顶部:50%；正确:100%；边距顶部:-5px；边框宽度:5px；边框样式:实心；边框颜色:透明黑色透明透明；}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="样式表"/><头><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yhpinhCrossing"匿名"><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"完整性="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSaxVtMp4YLEuNSaxVtM+="匿名"></script><身体><div class="container-fluid"><div class="row"><div class="col-4 bg-white p-0 记分牌"><div class="player-container"><div class="row p-2"><div class="col-3"><h4># <span class="rank">1</span></h4>

<div class="col-5"><h6 class="玩家名">玩家</h6><h6>点数:0</h6>

<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="角色"></div>

<span class="msgtooltiptext">工具提示文本</span>

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

</html>

如果我使用overflow-x: hidden，那么它会隐藏工具提示消息.但我希望它显示在玩家容器旁边的记分板上.像这样:

任何指示如何实现这一点?这是为了在角色旁边显示玩家发送的消息作为工具提示/弹出窗口.如果有人可以提出任何其他实现这一目标的方法，那也会非常有帮助.

解决方案

我没有找到在 div 上显示消息的方法，但使用 Bootstrap 工具提示 可以满足我的这种情况.我使用自定义 CSS 来更改工具提示的外观，并使用 JS 使用函数来显示和隐藏它.

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

body {背景色:#573bd6；}.记分牌{边框:纯 4px 黑色；最小高度:200px；溢出-y:自动；溢出-x:隐藏；}.玩家容器{位置:相对；}.玩家角色{最大高度:60px；}.tooltip .tooltip-arrow:before {边框右颜色:#fffa84 ！重要；}.tooltip .tooltip-inner {背景颜色:#fffa84 ！重要；颜色:#000 ！重要；}}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="样式表"/><头><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yhuCrossing"匿名"><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"完整性="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSaxVtMp4YLEuNSaxVtM+="匿名"></script><身体><div class="container-fluid"><div class="row"><div class="col-4 bg-white p-0 记分牌"><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 class="col-5"><h6 class="玩家名">玩家</h6><h6>点数:0</h6>

<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="角色"></div>

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

</html>

I am trying to display a message over another div which has overflow hidden. Here is my code snippet:

body {
  background-color: #573bd6;
}

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

.player-container{
  position:relative;
}

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

.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: -140px;
    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@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">
                        <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>
                    <span class="msgtooltiptext">Tooltip Text</span>
                </div>
            </div>

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

            </div>

        </div>
    </div>

</body>

</html>

If I useoverflow-x: hidden, then it hides the tooltip message. But I want it to display over the scoreboard beside the player-container. Something like this:

Any pointers how to achieve this? This is to display messages sent by the player beside their character as a tooltip / popup. If anyone can suggest any other way of achieving this, that would be also very helpful.

解决方案

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>

这篇关于在另一个带有隐藏溢出的 div 上显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆