Positioning elements for a tooltip

Question

I am sorry if this is really a newbie question - or if it is very simple...

I am trying to make a very basic image tooltip based only on CSS ( no JS ).

Fiddle here :http://jsfiddle.net/ufs44/1/

My problem is how to distance the image from the link in order for it not to obscure the text.

I really would like to make it with only CSS (later I will add some transitions) But right now, the tooltip is always hiding the other links below.

Doing position:relative actually makes the whole page "jump" because it is changing from display:none to display:block and the space is missing for the element...

I would like to know how I can make the tooltip to appear ABOVE the link for example, or to the side...

Answer 1

You need to use position: relative; within the link itself, and then position the image tooltip absolutely.

Fiddle

Answer 2

how to distance the image from the link in order for it not to obscure the text .

Elements with css position:absolute are positioned using css left , right, bottom, top

As the comment - http://jsfiddle.net/5W5bB/1 - using left

left:200px;