testo visualizzato al passaggio del mouse con successivo click

[mediasteno]

Non riesco ad uscirmene. Il mio intento è quello di fare in modo che, al passaggio del mouse, appare l'inizio del testo e al successivo click compare un pop up con l'intero testo, Ora ho diverse difficoltà.
I testi sono presenti in un database. Ora ho il testo iniziale

Lorem ipsum dolor sit amet, consectetur adipiscing elit[1]. Suspendisse volutpat sollicitudin gravida[2]. In egestas [3] lobortis massa.

quando il mouse passa su [1] oppure [2] oppure [3] mostra una breve introduzione di testo

In ornare tincidunt tincidunt. Nam sem risus, vehicula quis blandit sit .. clicca per continuare

e al click del mouse ho un pop up che contiene l'intero testo.

Ora sono riuscita ad avere l'effetto di passaggio mouse e successivo click usando javascript:

<script type="text/javascript">
      <!--
      function PopupCentrata()
      {
        var w = 500;
        var h = 250;
        var l = Math.floor((screen.width-w)/2);
        var t = Math.floor((screen.height-h)/2);
         
        window.open("nota.php","","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
      }
      //-->
</script>

$testo=preg_replace("@\[(\d+)\]@","<a href='javascript:PopupCentrata()' class='note'>[$1]<span> nota0$1 </span></a>",$testo);

Il testo $testo è richiamato con una SELECT.
La difficoltà sta nel passaggio successivo a nota0$1 deve corrispondere il testo che viene visualizzato e questo testo l'ho inserito in una tabella di un database.
Come faccio ad avere che al posto di [1] il testo della nota 01, a [2] il testo della nota 02 e cosi via... ? Non riesco a capire come posso fare in modo che nota0$1 o questa parte della sostituzione sia il risultato di una SELECT

inoltre volevo anche personalizzare il pop up ma anche in questo caso se utilizzo i css al popup non ho il risultato sperato.

 

[mediasteno]

nessun suggerimento?

 

[mediasteno]

Tooltip e database

Riprendo questa discussione, perchè il mio problema è sempre lo stesso.
Ho necessità di creare un tooltip e fin qui tutto bene. La mia difficoltà sta nel fatto che sia il testo di base che il testo che appare nella finestra al passaggio del mouse vengono estratti da un database. Ciò che devo realizzare è:
1) Ho un testo $testo;
2) In $testo ho inserito in alcuni punti [1]... [2] ... [3]... che rappresentano i punti dove al passaggio del mouse deve apparire il testo in una finestra
3) Ho creato il tooltip utilizzando la funzione preg_replace ed impostandola in questo modo:
$testo=preg_replace("@\[(\d+)\]@","<a class='tooltip' href='#'>[$1]<span> testo tooltip </span></a>",$testo);

4) Il "testo tooltip" va ricavato attraverso una SELECT e al punto [1] devo estrarre il testo nota01, [2] il testo della nota02, [3] il testo della nota03 e cosi via.
La mia difficoltà è qui come fare? Praticamente nella funzione preg_replace al posto di testo tooltip deve esserci il risultato di una SELECT impostata con WHERE di modo che possa estrarre la nota corrispondente.

Nel database ho una tabella nota con i campi
id
testo testo_nota01 testo_nota02 testo_nota03
num 1 2 3

Se qualcuno può suggerirmi qualcosa, anche un tutorial. Grazie