如何抑制jQuery工具提示的边框

Question

I'd like to suppress the border which seems to be a default in the jquery tooltip (as I want to use a background image instead). Looked quite a bit around, but all examples I've found do work with the default border. I can't suppress it by using "border: none". Here is a fiddle . Can someone give me a hint?

I used before another Tooltip javascript. There, the "vertical-align: middle" worked well. The jquery-tooltip seems not to accept it. I would appreciate an tip how to solve this.

Thanks for your help!

.ui-tooltip {
background: url("http://geodev.grid.unep.ch/gegslive/images/box.png") no-repeat 0 0 transparent;
width: 420px;
height: 200px;
color: black;
border: none;
padding: 0;
font-size: 80%;
vertical-align: middle; 
}


<div><a href='#' title='To improve recognition of the social, economic and ecological values of trees, forests and forest lands, including the ...'>Chapter 11, paragraph 21(a)</a></div>

Answer 1

Add box-shadow:none; to your styles to remove the shadow from it.

It is the shadow and not the border which you are seeing in your fiddle.

You need to write styles to adjust the background image positioning though.