Question

我为工具提示

设置了width和height为100％

.tool-tip,
.tool-tip.top{
    width: 100%;
    height: 100%;
    margin-left: -43px;
}

但它仍然没有扩展到我放在内容框中的任何内容。看看：

http://jsfiddle.net/sTCh4/1/

任何想法？

Answer 1

添加保留input的div和工具提示width，例如100%;

使用您提供的jsfiddle添加到<div class="on-focus clearfix" style="position: relative; padding: 0px; float: left; width: 100%;">
你必须为它做一些更多的造型才能让它看起来不错但是这会让你的工具提示很大

Answer 2

使用display:inline-table。然后进行一些其他更改以重新定位您的CSS箭头，使其不在展开框的侧面50％。

jsFiddle

*:not(.on-focus) > .tool-tip.slideIn,
.on-focus > .tool-tip{
    display: inline-table;
}
.tool-tip.right{
    top: 15px;
    right: auto;
    left: 106%;
    margin-top: -12px;
    margin-right: auto; 
    margin-left: auto;
}

.tool-tip.right:after{
    left: -5px;
    top: 11px;  
    margin-top: -6px;
    bottom: auto;
    border-top-color: transparent;  
    border-right-color: rgba( 0, 0, 0, .7); 
}

工具尖端扩展盒

2 个答案: