使工具提示位置固定 [英] Make tooltip position fixed

问题描述

我已经能够为我的应用创建工具提示.工具提示内容将来自数据库并且是动态的.有时它会有两行文本，有时它会有五行文本.无论内容是什么，我都在努力保持位置固定.有什么我可以尝试解决的问题吗?

I have been able to create the tooltips for my app. The tooltips content will comes from a DB and it is dynamic. Sometimes it will have two lines of text and sometimes it will have five lines of text. I am struggling to keep the position fixed regardless of what the content is. Is there anything I can try to fix this?

这是一个 fiddle 演示了我所面临的问题.

Here is a fiddle demonstrating what I am facing.

.tooltip:hover .dumClass {
    display: inline;
    color: #ffffff;
    border: 1px solid #DCA;
    background: #444;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
}

enter code here

推荐答案

CSS

.tooltip{position:relative;}
.tooltip .dumClass {
    z-index: 10;
    display: none;
    padding: 14px 20px;
    bottom:20px;
    left:0;
    width: 240px;
    line-height: 16px;
    position: absolute;
}

演示

这篇关于使工具提示位置固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！