El efecto se consigue con un poco de html aderezado con css. Voy a comenzar por éste último. El código, sin nada de javascript, que genera el efecto es el siguiente:

  /* Notas sobre marcos
   -------------------------------------------------- */
.nota {
    display:none;
    padding:5px;
    border:1px solid #cc9;
    border-radius:5px;
    background-color:#fafaea;
    position:relative;
    width:250px;
    overflow:auto;
    z-index:1;
}
/* Al pasar el ratón por encima del id `nota`, lo mostramos con
   otro fondo y al pulsar se muestra la  clase `.nota` en un marco.
   Esta clase `nota`, tiene que estar dentro del id `nota`
   para que pueda funcionar.
*/
#nota {
    text-decoration-line: underline;
    text-decoration-style: wave;
    text-decoration-color: #faa;
}
#nota:hover {
    background-color: #cc3;
}
#nota:active .nota {
    display:inline-block;
    font-size: 0.9em;
    position:absolute;
}

En el código se puede observar que necesitamos una etiqueta con id="nota", que en el código ajustaremos mediante #nota {...} que contenga una clase nota, que ajustaremos mediante .nota {...}.

La clase nota dibuja un marco de 250px de ancho cuando pulsemos y mantengamos pulsado el botón del ratón (#nota:active). Si no se va a utilizar en pantallas táctiles se puede pasar ese código a #nota:hover para que se muestre al pasar el cursor por encima. Sin embargo, en las pantallas táctiles es más delicado porque no hay un cursor que pasar por encima y, por tanto, es más sencillo hacerlo mediante pulsación.

Como digo el código html debe ser una etiqueta con id que contenga una clase, ambas nota. Por supuesto, puedes llamar a la etiqueta de una manera y a la clase de otra, por ejemplo nota y marco, pero tienes que recordar que la clase tiene que estar inscrita en la etiqueta con el id adecuado. El código que necesitamos sería algo así:

<p>Esto es <span id="nota">un ejemplo<span class="nota">Este es el mensaje que aparece.</span></span>de cómo funciona.</p>

También podrías anidar un párrafo <p> dentro de un <div> o cualquier combinación de etiquetas html a tu gusto. En mi caso prefiero utilizar la etiqueta <span> porque la puedes meter incluso una dentro de otra y te sirve tanto para lo mucho, como para lo poco.

Si has leído el artículo del otro día, ya sabrás que se utiliza una etiqueta #+macro: en la cabecera del archivo para definirla con el formato:

#+macro: nombre texto

Para no liarnos, el nombre elegido es ~nota~Hoy estoy de un original subido, o no..

Para llamarlo utilizamos el siguiente formato. Por ejemplo, el párrafo anterior está escrito como:

Para no liarnos, el nombre elegido es {{{nota(~nota~,Hoy estoy de un
original subido\, o no.)}}}.

Obsérvese que se ha «escapado» la coma en el texto anterior para que no sea tomado como un nuevo parámetro. Este código genera al exportar el siguiente html:

<p>
Para no liarnos, el nombre elegido es <span id="nota">~nota~<span class="nota">Hoy estoy de un original subido, o no.</span></span>.
</p>

Antes de nada debemos tener claro que para exportar código html en la misma línea, en org-mode se utiliza @@html:<etiqueta>@@, por lo tanto el texto de la macro se debería escribir tal que:

@@html:<span id="nota">@@$1@@html:<span class="nota">@@$2@@html:</span></span>@@  

donde $1 se sustituirá por la cadena que identificará la nota y $2 lo hará con el contenido del cuadro emergente. Por tanto, el código completo será:

#+macro: nota @@html:<span id="nota">@@$1@@html:<span class="nota">@@$2@@html:</span></span>@@

A lo largo del artículo se pueden apreciar el resultado, pero para saber cómo llamarlo podemos observar el primer párrafo:

El otro día hablé de las macros de ~org-mode~. No pensé que fuera un
tema importante, porque creí que lo conocía todo el mundo y que
incluso sería de uso generalizado. Alguien, me preguntó para qué y
cómo se pueden utilizar, que si podía poner /«un ejemplo práctico»/.
De eso va este artículo y voy a explicar un macro, con algunas
variaciones, sobre un efecto para web que sea práctico. Veamos: pasa
el cursor por encima {{{nota(de estas palabras,Esto es un ejemplo de
efecto visual generado desde una macro de ~org-mode~. Y dentro se
pueden utilizar todas las etiquetas del mismo: *negrita*\, /cursiva/\,
+tachado+\, etc.)}}} y luego pulsa y mantén pulsado el botón ratón.

Como se puede ver, en las últimas líneas está la llamada a la macro que genera el efecto. Dentro de ésta se puede utilizar el marcado de org-mode, recordando que hay que escapar las comas. La llamada a la macro lo que hace es sustituir el texto, que en nuestro ejemplo genera código html incrustado inline.

Espero que esta vez, con un ejemplo más práctico, se haya entendido cómo funcionan las macros. En cierto modo, funcionan de forma muy similar a las macros de Lisp. En el caso del artículo se genera código html, pero lo puedes ajustar para conseguir cualquier otro tipo de texto.