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


Tags: css,hover,hint

Problem :

I have hints in boxes, wich 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?

PS. Sorry for my english.



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


    CSS Howto..

    make a div fold out to show content

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to scale SVG properly and responsively in HTML5?

    How to stop a timeOut animation that contains multiple timeOut animations within

    Smarty / How to include PHP function to compress CSS file

    How to center hgroup in css

    How to fix cloud rising?

    With CSS, how do you unhighlight a link after clicking a different link?

    How can I make my web application look correct in IE 8 and 9? [closed]

    How to know if an element's width is absolute or relative?

    How to get CSS triangles to display in a row instead of vertical

    How to style a 3rd-party iFrame [duplicate]

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How to overwrite css animation

    How to make one string from a sentence capital in HTML/CSS?

    How can i align the text in center of a row in css?

    How do you position div's in html5? [closed]

    Css Sub menu needed to show on the left not on the right of the menu

    How to have video faded when paused - HTML

    How to use Javascript to check and load CSS if not loaded?

    How to get opaque text on div with transparency?

    If contains 'string' - set css “visibility:hidden;” - how to?

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to remove hover state

    How to stack two UL classes directly on top of one another in the middle of the page

    How to top align two cell divs within a table div when one cell div contains an absolute positioned div?

    How to dim an image keeping transparency untouched with CSS or JS?

    How to embed css to HTML in laravel?

    How to move one element to the right of another using CSS?

    Why does this qtip2 show blank content on 2nd click?