Question

我有一个场景，我必须在工具提示中显示数据。工具提示中看不到完整的数据，有没有办法增加工具提示窗口大小？

感谢。

Answer 1

我为我认为你正在寻找的东西做了一个fiddle。那里有一些额外的造型，但它应该适合你的情况。

HTML：

<a class="tooltip">FAIL
    <span class="custom define"><em>Start Time:</em>Wed, May 07, 2014<br />
        <em>EndTime:</em>blah blah<br />
        <em>Duration:</em>blah blah
    </span>
</a>

的CSS：

.tooltip {
    cursor: help;
    position: relative;
}
.tooltip span {
    margin-left: -999em;
    position: absolute;
    opacity: 0;
    z-index:999999998;
}
.tooltip:hover span {
    opacity:1.0;
    position: absolute;
    display:inline;
    left: 110%;
    top: 10%;
    margin-left: 0;
    width: 450px;
}
.tooltip:hover em {
    font-family: Candara, Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    padding: 0.2em 0 0.6em 0;
}
.custom {
    padding: 0.5em 0.8em 0.8em 2em;
}
* html a:hover {
    background: transparent;
}
.define {
    background: #efefef;
    border: 2px solid #009900;
}

鼠标悬停时显示的数据

1 个答案: