The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.

Fiddle here


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


.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');  

As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.


Is there a pure CSS solution?

If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?

1 Answer 1


You can use CSS arrows on .wpcf7-not-valid-tip: http://jsfiddle.net/D2KFX/2/

  • Great, can't see any downside with that. Nice one. Thanks. Commented Oct 7, 2013 at 3:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.