Html CSS3:将工具提示div height增加到向上

Html CSS3:将工具提示div height增加到向上,html,css,Html,Css,我有一个文本溢出:省略号。当我将鼠标悬停在文本上时,就会得到一个包含整个文本的工具提示div 但是,当文字太多时,工具提示div height将向下而不是向上增加 。添加了标题{ 位置:相对位置; 顶部:50px; } .增加了标题和分区范围{ 显示:内联块; 文本溢出:省略号; 溢出x:隐藏; 空白:nowrap; 宽度:180px; 最大宽度:190px; } .添加了标题\u div.标题\u工具提示\u div{ 位置:绝对位置; 顶部:-40px; 宽度:185px; 高度:自动;

我有一个文本溢出:省略号。当我将鼠标悬停在文本上时,就会得到一个包含整个文本的工具提示div

但是,当文字太多时,工具提示div height将向下而不是向上增加

。添加了标题{
位置:相对位置;
顶部:50px;
}
.增加了标题和分区范围{
显示:内联块;
文本溢出:省略号;
溢出x:隐藏;
空白:nowrap;
宽度:180px;
最大宽度:190px;
}
.添加了标题\u div.标题\u工具提示\u div{
位置:绝对位置;
顶部:-40px;
宽度:185px;
高度:自动;
填充物:5px;
背景:rgba(0,0,0,0.9);
边界半径:2px;
颜色:#FFFFFF;
可见性:隐藏;
不透明度:0;
过渡:所有0.5s缓解;
}
.added_caption_div.caption_tooltip_div:之后{
位置:绝对位置;
最高:100%;
左:10%;
宽度:0;
边框顶部:5px实心#000;
边框顶部:5px实心rgba(51,51,51,0.9);
右边框:5px实心透明;
左边框:5px实心透明;
内容:“;
字号:0;
线高:0;
}
.added\u caption\u div:hover.caption\u工具提示\u div{
能见度:可见;
不透明度:1;
过渡:所有0.5s的轻松过渡;
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本

而不是
顶部:-40px给出<代码>底部:100%

.added_caption_div .caption_tooltip_div {
   bottom: 100%;
}
。添加了标题{
位置:相对位置;
顶部:0px;
}
.增加了标题和分区范围{
显示:内联块;
文本溢出:省略号;
溢出x:隐藏;
空白:nowrap;
宽度:180px;
最大宽度:190px;
}
.添加了标题\u div.标题\u工具提示\u div{
位置:绝对位置;
顶部:-105px;
宽度:185px;
高度:自动;
填充物:5px;
背景:rgba(0,0,0,0.9);
边界半径:2px;
颜色:#FFFFFF;
可见性:隐藏;
不透明度:0;
过渡:所有0.5s缓解;
}
.added_caption_div.caption_tooltip_div:之后{
位置:绝对位置;
最高:100%;
左:10%;
宽度:0;
边框顶部:5px实心#000;
边框顶部:5px实心rgba(51,51,51,0.9);
右边框:5px实心透明;
左边框:5px实心透明;
内容:“;
字号:0;
线高:0;
}
.添加了\标题\分区:悬停范围{
顶部:35px;
位置:绝对位置;
}
.添加了\u标题\u div:悬停{
顶部:100px;
}
.added\u caption\u div:hover.caption\u工具提示\u div{
能见度:可见;
不透明度:1;
过渡:所有0.5s的轻松过渡;
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本

@Rishi现在检查一下