Search code examples
csshoverhint

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

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?

Solution 
  • 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