CSS: How to move hint box (a:hover) to the left?

Question

I have hints in boxes, which are made like this:
CSS code:

a span
{
  display:none;
}
a:hover span
{
  position:fixed;
  display:inline;
  border: 1px solid #0000FF;
  margin: 0px 0px 0px 10px;
  padding: 5px;
  color: #000000;
  background: #faffc3;
  opacity:.90;
}

HTML code, hint are between span tags, and inside a element:

<div>
  Some text, 
  <a href="#">link<span>Hint.<br>Second line of hint.</span></a>
  , some text, and another
  <a href="#">link<span>Hint</span></a>.
</div>

Is it possible to move hint's box from the right side of the link (default position), to the left side by using some CSS properties?

Answer 1

a {
    position:relative;
}

a span
{
  display:none;
}
a:hover span
{
  position:absolute;
  display:inline;
  border: 1px solid #0000FF;
  margin: 0px 0px 0px 10px;
  padding: 5px;
  color: #000000;
  background: #faffc3;
  opacity:.90;
  right:0;
  margin-right: 105%;
}

DEMO

Answer 2

you need to set margin-left according to your requirement.

a:hover span
{
   margin-left:-10px; 
}

see example

http://jsfiddle.net/dSd2a/3/

Answer 3

I think this code will work for you:

a{
    position: relative;
}

a:hover span{
    position: absolute;
    right: 100%;
}

The span will have its right border touching the left border of the <a>. This will work better if you define a width for the span.

jsFiddle