：悬停：css工具提示和空白问题之后_Css_Html

：悬停：css工具提示和空白问题之后

css html

：悬停：css工具提示和空白问题之后,css,html,Css,Html,此处描述了该场景： .mainbox{ 宽度：150px； } .集装箱{ 溢出-x：自动；空白：nowrap； } .职位1{ 显示：内联块；宽度：50px；高度：50px；保证金：2倍；填充：2px；背景色：#B6DEFC；边框：1px实心；边界半径：3px； -webkit边界半径：3px； -moz边界半径：3px；边框颜色：#A8A8A8；位置：相对位置；字体大小：xx小；光标：指针；空白：正常； } .位置1：悬停：之后{ 位置：绝对位置；宽度：100p

此处描述了该场景：

.mainbox{
宽度：150px；
}
.集装箱{
溢出-x：自动；
空白：nowrap；
}
.职位1{
显示：内联块；
宽度：50px；
高度：50px；
保证金：2倍；
填充：2px；
背景色：#B6DEFC；
边框：1px实心；
边界半径：3px；
-webkit边界半径：3px；
-moz边界半径：3px；
边框颜色：#A8A8A8；
位置：相对位置；
字体大小：xx小；
光标：指针；
空白：正常；
}
.位置1：悬停：之后{
位置：绝对位置；
宽度：100px；
内容：attr（数据标题）；
边框：1px实心#FF0000；
填充：15px 5px 10px 5px；
背景:#FF9999；
边界半径：5px；
z指数：1000；
字体大小：小；
}

试试看

}更新：

您可以尝试这样的解决方案，从

.position1

中删除

位置：relative

，然后将此规则（

位置：relative

）应用于

.mainbox

，在这种情况下，工具提示将相对于元素，该元素位于具有规则

溢出-x:hidden

的元素之外，并且将可见。我也更新了代码，再次运行它

空格没有问题，容器设置为

overflow:hidden

无法在容器外显示工具提示

.mainbox{
宽度：150px；
位置：相对位置；
}
.集装箱{
溢出-x：自动；
空白：nowrap；
}
.职位1{
显示：内联块；
宽度：50px；
高度：50px；
保证金：2倍；
填充：2px；
背景色：#B6DEFC；
边框：1px实心；
边界半径：3px；
-webkit边界半径：3px；
-moz边界半径：3px；
边框颜色：#A8A8A8；
/*位置：相对位置*/
字体大小：xx小；
光标：指针；
空白：正常；
}
.位置1：悬停：之后{
位置：绝对位置；
宽度：100px；
内容：attr（数据标题）；
边框：1px实心#FF0000；
填充：15px 5px 10px 5px；
背景:#FF9999；
边界半径：5px；
z指数：1000；
字体大小：小；
}

现在我明白了在看到图像后您到底想要什么

您只需将绝对位置更改为固定位置。位置1：悬停：下课后，这是更新的小提琴

.mainbox{
    width:250px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: fixed;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}

好的，萨霍夫。。。甚至我也不喜欢“效果”（我的意思是，看看方框3和方框4，以及它的工具提示：它们显示得离方框很远）。。。在位置1类中，我无法“触摸”相对位置

原因如下…我用这个完成了上面的代码

我需要将标签放在如下框中：

<!--  HTML -->
<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1">
        <span class="number">1</span>
        <span class="name">Name 1</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title2">
        <span class="number">2</span>
        <span class="name">Name 2</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title3">
        <span class="number">3</span>
        <span class="name">Name 3</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title4">
        <span class="number">4</span>
        <span class="name">Name 4</span>
        <span class="date">2014/10/03</span>
    </div>
</div>
</div>

<!-- CSS -->
.mainbox{
    width:150px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: absolute;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}


1.
名字1
2014/10/03
2.
名称2
2014/10/03
3.
名字3
2014/10/03
4.
名字4
2014/10/03
.mainbox{
宽度：150px；
位置：相对位置；
}
.集装箱{
溢出-x：自动；
空白：nowrap；
}
.职位1{
显示：内联块；
宽度：50px；
高度：50px；
保证金：2倍；
填充：2px；
背景色：#B6DEFC；
边框：1px实心；
边界半径：3px；
-webkit边界半径：3px；
-moz边界半径：3px；
边框颜色：#A8A8A8；
位置：相对位置；
字体大小：xx小；
光标：指针；
空白：正常；
文本对齐：居中；
}
.位置1：悬停：之后{
内容：attr（数据标题）；
位置：绝对位置；
宽度：100px；
边框：1px实心#FF0000；
填充：15px 5px 10px 5px；
背景:#FF9999；
边界半径：5px；
z指数：1000；
字体大小：小；
}
.号码{
位置：相对位置；
浮动：对；
填充：1px；
}
.姓名{
显示：内联块；
宽度：45px；
高度：41px；
单词break：打破一切；
溢出：隐藏；
文本溢出：省略号；
-o-text-overflow：省略号；
}
.日期{
底部：0；
左：1px；
右：1px；
位置：绝对位置；
}

建议

注意：代码是在服务器端生成的（这是一个C#/.net网络应用程序）

好的，需要考虑一下。。。我会更新答案，因为我找到了任何解决方案。请附上任何你想要实现的快照；我还准备了一个魔兽世界…看起来很有效…但是。。。如果您在

.mainbox{width:250px；position:relative；}

中更改

.mainbox{width:25%；position:relative；}

的话，效果很糟糕：（对此有什么想法吗？：）这是我根据您的要求所能达到的最佳效果。在这篇文章中，我对html和css做了一些修改。我在每个position1 div中引入了另一个带有tooltipval类的span，我从css中删除了“.position1:hover:after”类，并添加了一些其他类（我曾经创建过tooltip，并根据您的要求对其进行了一些更改）。必须在mainbox的左侧为最左侧框的工具提示留出空间。如果有效，请勾选答案。

<!--  HTML -->
<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1">
        <span class="number">1</span>
        <span class="name">Name 1</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title2">
        <span class="number">2</span>
        <span class="name">Name 2</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title3">
        <span class="number">3</span>
        <span class="name">Name 3</span>
        <span class="date">2014/10/03</span>
    </div>
    <div class="position1" data-title="My data-title4">
        <span class="number">4</span>
        <span class="name">Name 4</span>
        <span class="date">2014/10/03</span>
    </div>
</div>
</div>

<!-- CSS -->
.mainbox{
    width:150px;
    position:relative;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 2px;
    padding: 2px;
    background-color: #B6DEFC;
    border: 1px solid;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-color: #A8A8A8;
    position: relative;
    font-size: xx-small;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}
.position1:hover:after{
    content: attr(data-title);
    position: absolute;
    width: 100px;
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;
}
.number{
    position:relative;
    float:right;
    padding:1px;   
}
.name{
    display:inline-block;
    width: 45px;
    height: 41px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;   
}
.date{
    bottom: 0;
    left: 1px;
    right: 1px;
    position:absolute;
}