0

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>
luftikus143
  • 1,285
  • 3
  • 27
  • 52
  • cant you edit the css for your plug-in? – Saksham Aug 25 '14 at 08:12
  • For the vertical align: I went with solution proposed in the second answer [here](http://stackoverflow.com/questions/16629561/css-vertical-align-middle-not-working). And: the width, which seems to be limited by default to 320px, can be changed by using: max-width. – luftikus143 Aug 25 '14 at 09:17

1 Answers1

0

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.

Saksham
  • 9,037
  • 7
  • 45
  • 73