Mouseover descrizione testo

**dovakin** · 18-01-2013, 23:26

Ciao ragazzi, ho bisogno del vostro aiuto... vorrei realizzare uno script che mi permetta di ottenere una descrizione/spiegazione di una determinata parola, ogni qual volta essa sia inserita all' interno di un post del mio forum phpBB. Cercando qua e la ho trovato questa:

https://www.phpbb.com/community/view...f=71&t=2103750

ma dato che sfrutta il tag title non mi soddisfa a pieno.

vorrei ottenre un effetto simile al seguente:

http://www.androidiani.com/forum/mod...-e-moduli.html

(passate il mouse sulla parola "recovery" o le altre con la doppia sottolineatura)

sapete aiutarmi?

grazie!

**cavicchiandrea** · 19-01-2013, 00:10

Il secondo link si riferisce ad un forum vbulletin che è un "prodotto" diverso del phpBB e lo script in questione ritengo sia un plugin del forum che phpBB non ha.
Ricreare la stessa cosa su phpBB lo ritengo molto difficile e complesso e che occorra una ottima conoscenza del forum del php e del javascript/ajax

**dovakin** · 19-01-2013, 00:37

si infatti era la stessa risposta che mi ero dato pure io, per questo ho chiesto il vostro aiuto.

Mi chiedevo se non esistesse niente di simile il java script, ajax o jq che facesse la stessa cosa, anche perchè nel primo link il php non viene nemmeno menzionato si tratta solo di uno script...

**cavicchiandrea** · 19-01-2013, 02:13

Originariamente inviato da dovakin
... Mi chiedevo se non esistesse niente di simile il java script, ajax o jq che facesse la stessa cosa...

Secondo me no, ma non tutta la "conoscenza" del web, come ritengo che le due cose siano molto diverse il primo è un tooltip (e in rete ne trovi diversi) il secondo a mio avviso è più integrato col forum ritengo ci sia una lista di parole chiavi (specificate dall'amministratore) con relative descrizioni che quando vengono scritte nelle discussioni creano quell'effetto.

**carlomarx** · 19-01-2013, 02:39

Variante HTML5 del primo esempio…:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Integrated tooltips</title>
<style type="text/css">
	span[data-descr] {
		position: relative;
		text-decoration: underline;
		color: #00F;
		cursor: help;
	}

	span[data-descr]:hover::after {
		content: attr(data-descr);
		position: absolute;
		left: 0;
		top: 24px;
		min-width: 200px;
		border: 1px #cccccc solid;
		border-radius: 10px;
		background-color: #ffffcc;
		padding: 12px;
		color: #000000;
		font-size: 14px;
	}
</style>
</head>
 
<body>

	

This is an example <span data-descr="collection of words and punctuation">text</span> with a few <span data-descr="small popups which also hide again">tooltips</span>. Take a <span data-descr="not to be taken literally">look</span>...
	</p>

</body>
</html>

Discussione: Mouseover descrizione testo

Strumenti discussione

Ricerca discussione

Visualizza

Mouseover descrizione testo

Permessi di invio