0

这个想法是让当人们未能填写必填字段时出现的无效错误提示像气泡一样显示出来。因此，箭头图像显示在文本的中心和下方，并指向他们错过的字段。

在这里提琴

HTML：

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS：

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
        background-position: 0 0; 
        background-repeat: no-repeat;
        background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');  
}

如您所见，我有一个背景颜色和需要位于元素中间及其下方的箭头图像，但是，当然，如果您使用背景位置定位它，图像将被隐藏，因为它不能溢出元素本身。如果我可以轻松地编辑 HTML，这将很容易，但我不希望这样做，因为我正在使用插件并且希望将来可以自由地更新插件。

问题：

有纯 CSS 解决方案吗？

如果没有（我怀疑没有）解决这个问题的最干净的方法是什么？我会使用 add_filter 来更改 html 以在工具提示周围放置一个 div，然后我可以将 bg 图像添加到其中吗？带有css“内容：”的东西，一个js解决方案？

4

1 回答 1

0

在其他地方得到了答案。除非有人能想到更好的东西，否则会接受。

http://jsfiddle.net/D2KFX/2/

这可以完美地使用 CSS（尽管添加带有 content: 声明的内容），通过绘制一个带边框的三角形而不是为其使用图像。

CSS

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
    position: relative;
}
.wpcf7-not-valid-tip:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 0, 0, 0);
    border-top-color: red;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}
于 2013-10-07T03:36:41.930 回答