可滚动组件内的工具提示 [英] Tooltip inside a scrollable component

查看：45
本文介绍了可滚动组件内的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个可滚动的 div .在 div 中，我有多张卡片.其中一张卡片上有一个工具提示.我希望工具提示在 hover 时完整显示，而不是部分显示.我该怎么做?

也尝试隐藏溢出，不起作用.有没有办法在可滚动组件中放置工具提示?

.card {宽度:250px；最小宽度:250px；最小高度:40px；背景颜色:绿色；右边距:15px；}.cardContainer {显示:弹性；溢出:滚动；}.hoverArea {背景颜色:黄色；最大宽度:100px；位置:相对；}.hoverPopup {位置:绝对；最小宽度:180px；最小高度:180px；背景颜色:红色；底部:0；显示:无；边框:3px纯黑色；}.hoverArea:hover .hoverPopup {显示:块；}

<p>你好，世界</p><div class="cardContainer"><div class="card"><p>卡1</p><div class="hoverArea"><div class="hoverPopup"><p>嘿</p>
<p>悬停在这里</p>

<div class="card"><p>卡2</p>

<div class="card"><p>卡3</p>

<div class="card"><p>卡4</p>

解决方案

默认情况下无法在父级之外显示弹出窗口，并且由于您不希望父级增加高度，因此需要另一种解决方案.

我在 html 中添加了一个新元素(

)，如下所示:

constcardContainer = document.querySelector('.cardContainer'),悬停区域 = document.querySelectorAll('.hoverArea'),tooltip = document.createElement('div');tooltip.className = '工具提示';document.body.appendChild(工具提示);悬停区域.forEach(o => {//显示工具提示o.addEventListener('mouseenter', () => {tooltip.innerHTML = o.querySelector('.hoverPopup').innerHTML;tooltip.style.left = `${o.offsetLeft - cardContainer.scrollLeft}px`;tooltip.style.top = `${o.offsetTop + 25}px`;tooltip.style.display = 'block';});//隐藏到工具提示o.addEventListener('mouseleave', () => {tooltip.style.display = '无';});});

.card {宽度:250px；最小宽度:250px；最小高度:40px；背景颜色:绿色；右边距:15px；}.cardContainer {显示:弹性；溢出:滚动；}.hoverArea {背景颜色:黄色；最大宽度:100px；位置:相对；}.hoverPopup {显示:无；}.工具提示{背景:RGBA(0,0,0,.7)；边界半径:2px；颜色:#fff;显示:无；左:0；最小高度:180px；最小宽度:180px；填充:8px；位置:绝对；}

<p>你好，世界</p><div class="cardContainer"><div class="card"><p>卡1</p><div class="hoverArea"><div class="hoverPopup"><p>嘿那里卡1</p>
<p>悬停在这里</p>

<div class="card"><p>卡2</p><div class="hoverArea"><div class="hoverPopup"><p>嘿那里 Card2</p>

<p>悬停在这里</p>

<div class="card"><p>卡3</p><div class="hoverArea"><div class="hoverPopup"><p>嘿那里 Card3</p>

<p>悬停在这里</p>

<div class="card"><p>卡4</p><div class="hoverArea"><div class="hoverPopup"><p>嘿那里 Card4</p>

<p>悬停在这里</p>

I have a scrollable div . Inside the div I have multiple cards. One of the cards has a tooltip on it. I want the tooltip to be displayed in full on hover , not partially. How can i do it?

Tried with overflow hidden also, not working. Is there a way to put a tooltip in a scrollable component?

.card {
  width: 250px;
  min-width: 250px;
  min-height: 40px;
  background-color: green;
  margin-right: 15px;
}

.cardContainer {
  display: flex;
  overflow: scroll;
}

.hoverArea {
  background-color: yellow;
  max-width: 100px;
  position: relative;
}

.hoverPopup {
  position: absolute;
  min-width: 180px;
  min-height: 180px;
  background-color: red;
  bottom: 0;
  display: none;
  border: 3px solid black;
}

.hoverArea:hover .hoverPopup {
  display: block;
}

<div>
<p>
  Hello World
</p>
<div class="cardContainer">
  <div class="card">
    <p>
    Card1
    </p>
    <div class="hoverArea">
      <div class="hoverPopup">
        <p>
        Hey There
        </p>
      </div>
      <p>
      Hover Here
      </p>
    </div>
  </div>
  <div class="card">
    <p>
    Card2
    </p>
  </div>
  <div class="card">
    <p>
    Card3
    </p>
  </div>
  <div class="card">
    <p>
    Card4
    </p>
  </div>
</div>
</div>

解决方案

The popup can't be shown outside the parent by default, and since you don't want the parent to increase in height, another solution will be needed.

I have added a new element (<div class="tooltip">) to the html like this:

const
    cardContainer = document.querySelector('.cardContainer'),
    hoverArea = document.querySelectorAll('.hoverArea'),
    tooltip = document.createElement('div');

tooltip.className = 'tooltip';
document.body.appendChild(tooltip);

hoverArea.forEach(o => {
    // Show the tooltip
    o.addEventListener('mouseenter', () => {
        tooltip.innerHTML = o.querySelector('.hoverPopup').innerHTML;
        tooltip.style.left = `${o.offsetLeft - cardContainer.scrollLeft}px`;
        tooltip.style.top = `${o.offsetTop + 25}px`;
        tooltip.style.display = 'block';
    });
    // Hide to tooltip
    o.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
    });
});

.card {
    width: 250px;
    min-width: 250px;
    min-height: 40px;
    background-color: green;
    margin-right: 15px;
}

.cardContainer {
    display: flex;
    overflow: scroll;
}

.hoverArea {
    background-color: yellow;
    max-width: 100px;
    position: relative;
}

.hoverPopup {
    display: none;
}

.tooltip {
    background: rgba(0,0,0,.7);
    border-radius: 2px;
    color: #fff;
    display: none;
    left: 0;
    min-height: 180px;
    min-width: 180px;
    padding: 8px;
    position: absolute;
}

<div>
    <p>
        Hello World
    </p>
    <div class="cardContainer">
        <div class="card">
            <p>
                Card1
            </p>
            <div class="hoverArea">
                <div class="hoverPopup">
                    <p>
                        Hey There Card1
                    </p>
                </div>
                <p>
                    Hover Here
                </p>
            </div>
        </div>
        <div class="card">
            <p>
                Card2
            </p>
            <div class="hoverArea">
                <div class="hoverPopup">
                    <p>
                        Hey There Card2
                    </p>
                </div>
                <p>
                    Hover Here
                </p>
            </div>
        </div>
        <div class="card">
            <p>
                Card3
            </p>
            <div class="hoverArea">
                <div class="hoverPopup">
                    <p>
                        Hey There Card3
                    </p>
                </div>
                <p>
                    Hover Here
                </p>
            </div>
        </div>
        <div class="card">
            <p>
                Card4
            </p>
            <div class="hoverArea">
                <div class="hoverPopup">
                    <p>
                        Hey There Card4
                    </p>
                </div>
                <p>
                    Hover Here
                </p>
            </div>
        </div>
    </div>
</div>

这篇关于可滚动组件内的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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