Tooltip

Gli argomenti di questa pagina

  • Tooltip
  • Il CSS
  • Il JS
  • Preparazione del contenuto della Tooltip
  • Utilizzo della Tooltip
  • La demo

Tooltip

Per questa Tooltip è necessario:
il CSS
il JS

Per crearla sono necessari due passi:
creare una variabile con tutti gli elementi che si desidera visualizzare nella Tooltip
creare il collegamento usando la variabile e facendo riferimento alle finzioni JS da attivare

Il CSS

Queste che seguono sono delle semplici regole da applicare agli ID necessari alla Tooltip.
Il contenitore della Tooltip usa una classe permettendo così di usare più contenitori con la stessa classe in una singola pagina.
A tutti questi elementi è possibile modificare le regole per dare la formattazione desiderata alla Tooltip.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.hotspot {
    color:#900; 
    padding-bottom:1px; 
    border-bottom:1px dotted #900; 
    cursor:pointer;
}

#tt {
    position: absolute;
    display: block;
    background: url(images/tt_left.png) repeat-y top left;
    color:#900;
    font-size: 12px;
    text-align: left;
}

#tttop {
    display: block;
    height: 5px;
    margin-left: 5px;
    background: url(images/tt_top.png) repeat-x top right;
    overflow: hidden;
}

#ttcont {
    display: block;
    padding: 2px 12px 3px 7px;
    margin-left: 5px;
    background: #F1FAE7 url(images/tt_left.png) repeat-y top right;
    color: #0E5C26;
}

#ttbot {
    display: block;
    height: 5px;
    margin-left: 5px;
    background: url(images/tt_bottom.png) repeat-x top right;
    overflow: hidden;
}

 

Il JS

Il JS utilizzato è questo che segue.
Le funzioni da chiamare sono:
show:function(v,w) che richiede due argomenti qui chiamati "v" e "w" che sono rispettivamente la stringa e la larghezza del riquadro o della eventuale immagine da inviare
hide:function() che non richiede parametri.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
var tooltip=function(){
    var id = 'tt';
    var top = 3;
    var left = 3;
    var maxw = 850;
    var speed = 10;
    var timer = 20;
    var endalpha = 95;
    var alpha = 0;
    var tt,t,c,b,h;
    var ie = document.all ? true : false;
    return{
        show:function(v,w){
            if(tt == null){
                tt = document.createElement('div');
                tt.setAttribute('id',id);
                t = document.createElement('div');
                t.setAttribute('id',id + 'top');
                c = document.createElement('div');
                c.setAttribute('id',id + 'cont');
                b = document.createElement('div');
                b.setAttribute('id',id + 'bot');
                tt.appendChild(t);
                tt.appendChild(c);
                tt.appendChild(b);
                document.body.appendChild(tt);
                tt.style.opacity = 0;
                tt.style.filter = 'alpha(opacity=0)';
                document.onmousemove = this.pos;
            }
            tt.style.display = 'block';
            c.innerHTML = v;
            tt.style.width = w ? w + 'px' : 'auto';
            if(!w && ie){
                t.style.display = 'none';
                b.style.display = 'none';
                tt.style.width = tt.offsetWidth;
                t.style.display = 'block';
                b.style.display = 'block';
            }
            if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
            h = parseInt(tt.offsetHeight) + top;
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(1)},timer);
        },
        pos:function(e){
            var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
            tt.style.top = (u - h) + 'px';
            tt.style.left = (l + left) + 'px';
        },
        fade:function(d){
            var a = alpha;
            if((a != endalpha && d == 1) || (a != 0 && d == -1)){
                var i = speed;
                if(endalpha - a < speed && d == 1){
                    i = endalpha - a;
                }else if(alpha < speed && d == -1){
                    i = a;
                }
                alpha = a + (i * d);
                tt.style.opacity = alpha * .01;
                tt.style.filter = 'alpha(opacity=' + alpha + ')';
            }else{
                clearInterval(tt.timer);
                if(d == -1){tt.style.display = 'none'}
            }
        },
        hide:function(){
            clearInterval(tt.timer);
            tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
        }
    };
}();

 

Preparazione del contenuto della Tooltip

Per facilitare la sintassi per il richiamo del JS della Tooltip è possibile preparare una variabile contenente tutto il testo, le immagini e la formattazione del testo.
Unica limitazione nel preparare la stringa è quella di scrivere il tutto su una unica riga e, anche se vengono accettati i tag html, non verngono accettati i caratteri di ritorno carrello "\n" o "\rn".

1
2
3
4
5
<?php
$mess_tool_1 
"<b>Gli Oggetti nel box</b>:<br /><img src=\'images/archimede_1.jpg\' alt=\'demo\' /><br />Questa Tooltip dimostrativa";
$mess_tool_2 "<b>Gli Oggetti nel box</b>:<br /><img src=\'images/edy.jpg\' alt=\'demo\' /><br />Questa Tooltip dimostrativa";
$message "<p>Qui di seguito un testo riempitivo da mostrare nella Tooltip.</p><p>Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.</p><p>Stet invenire nam no. Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea. Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p><ul><li>Primo paragrafo</li><li>Secondo messaggio</li></ul>";
?>

 

Utilizzo della Tooltip

Il contenitore della Tooltip deve avere la classe hotspot.
Il JS viene richiamato usando due eventi JS:
onmouseover per ciamare la funzione tooltip.show() coi due parametri stringa e larghezza quadro. Se si inserisce una immagine la larghezza minima deve essere quella della immagine aumentata di una trentina di pixel altrimenti l'immagine esce dal riquadro
onmouseout per chiamare la funzione tooltip.hide() senza alcun parametro.
NB: se la pagina non è PHP ma HTML è ovvio che non si può far uso di variabili ma tutto il contenuto deve essere inserito nel onmouseover al posto della variabile qui usata.

1
2
3
4
5
<!-- alla larghezza do un +35 rispetto alla larghezza dell'immagine -->
<p>Questa &egrave; una prima Tooltip <span class="hotspot" onmouseover="tooltip.show('<?php echo $mess_tool_1?>', 291)" onmouseout="tooltip.hide()">in questa immagine</span></p>
<p>Questa &egrave; la secondaTooltip <span class="hotspot" onmouseover="tooltip.show('<?php echo $mess_tool_2?>', 435)" onmouseout="tooltip.hide()">in questa immagine</span></p>
<p>In questa non ci sono immagini ma <span class="hotspot" onmouseover="tooltip.show('<?php echo $message?>', 300)" onmouseout="tooltip.hide()">solo testo</span></p>

 

La demo

 

Questa è una prima Tooltip in questa immagine

Questa è la secondaTooltip in questa immagine

In questa non ci sono immagini ma solo testo

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum