popup in css

[stranyera]

hola gente...sto seguendo questo esempio:
http://meyerweb.com/eric/css/edge/popups/demo.html
per poter fare in modo che andando su un link appaia una descrizione.
Il mio problema è pero' il seguente:
io ho bisogno che la "pop up" si apra al fianco del link a cui io assegno

a:hover span

mi spiego meglio allegandovi una immagine:
al click o all'hover sul testo "link" mi si deve aprire una "popup" con alttro semplicissimo testo.

ovviamente graficamente le popup saranno identiche (nell'immagine ho fatto una trasparenza ma solo per far capire...spero!) ma dovranno essere incorrispondeza del link.

Ho provato a farlo con quello di meyer ma non riesco a posizionare le "popup" in modo che possano andare bene per ogni link (la pagina è lunghina).
help me!!!!

[fcaldera]

una delle possibili soluzioni

<style type="text/css">
/* <![CDATA[ */

    a span {
      display: none;
      position  : relative;
    }

    a:hover span {
      display: block;
      background : #9ca;
      text-decoration : none;      
     color : #fff;
     

      width     : 180px;
      height    : 85px;
      
      position  : absolute;
      z-index   : 9999;
      
      top       : 50px;  
      left      : 50px;
      
      opacity   : .9;
      -moz-opacity : .9
      filter   : alpha(opacity=90);
    }
    
    
    
/* ]]> */
</style>


Link<span>Tooltip</span> lorem ipsum sit amen et bla bla bla 
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla
lorem ipsum sit amen et bla bla bla lorem ipsum sit amen et bla bla bla

Cambia i valori top e left opportunamente e fai qualche prova

[thomas_anderson]

prova questa risorsa del mio amico Bruno:

http://www.brunildo.org/test/index.html#pop

ps. la soluzione di Fabrizio ha bisogno dei commenti condizionali. non è CSS standard (filtri per l'opacità)

[fcaldera]

si ma io li ho messi solo per fare un pò di scena ... del resto lei li ha messi solo per far capire il problema...

[thomas_anderson]

scusa, mi son fatto prendere la mano.. ops, la tastiera...

[stranyera]

si l'opacità era per fare un esempio...a me non interessa...

cmq sto provando mio caro cladera...una domanda: dove lo va apescare quel tabindex="1" ?
voglio dire, lo devo cambiare progressivamente? (e' la prima volta che lo vedo! )

[fcaldera]

puoi tranquillamente omettere l'attributo tabindex... (io ce l'ho di default nei pezzi di codice già pronti (snippet) quando uso SciTe)

[stranyera]

Originariamente inviato da fcaldera
puoi tranquillamente omettere l'attributo tabindex... (io ce l'ho di default nei pezzi di codice già pronti (snippet) quando uso SciTe)

uhm...ok

ma mi spiegheresti cosa indica?...come ti ho scritto oggi non l'avevo mai visto prima d'ora

[fcaldera]

normalmente nella pagina esistono alcuni elementi che possono prendere il focus, ovvero se clicchi con il tasto <tab> questi vengono "contornati" e resi attivi (pensa ad esempio ai link oppure i campi di un form)

Di solito la tabulazione tra i vari elementi avviene nello stesso ordine in cui sono definiti nel codice questi elementi: se però preferisci che tale ordine venga ridefinito allora usa esplicitamente tabindex come attributo per definire un ordinamento.

Puoi usare anche valori identici su elementi differenti e in questo caso la tabulazione evidenzierà prima quello che viene per primo nel codice.

[whisher]

Ciao.
Quello che segnali tu non funziona su IE
ho trovato questo guarda un po:

a span {
  display: none;
  }
 
a:hover {
  background-color: #dbe4f2;
  }
/* The above hover change defeats the
  IE/Win display changing bug */
 
a:hover span {
  display: block;
  background: #fdd;
  border: 1px solid red;
  } 

Per le misure che ti servivano mi sembra che non
manchi altro.