Tooltip: JS-Tooltip

Gli argomenti di questa pagina

  • JS-TOOLTIP
  • Il JS
  • La preparazione delle tooltip
  • Alcuni esempi

JS-TOOLTIP

Per questa Tooltip é necessario il solo tooltip.js

Il JS

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
var OP = (navigator.userAgent.indexOf('Opera') != -1);
var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP);
var GK = (navigator.userAgent.indexOf('Gecko') != -1);
var SA = (navigator.userAgent.indexOf('Safari') != -1);

var tooltip = null;

function TOOLTIP() {
//----------------------------------------------------------------------------------------------------
// Configuration
//----------------------------------------------------------------------------------------------------
    this.width = 200;                    // width (pixels)
    this.bgColor = "#c1e1ba";            // background color        #c1e1ba        #FFFFC0
    this.textFont = "Comic Sans MS";    // text font family
    this.textSize = 13;                    // text font size (pixels)
    this.textColor = "#A00000";            // text color            #103F10        #A00000
    this.textAlign = "center";            // text alignment: "left", "right" or "center"
    this.border = "3px solid #000000";    // border (CSS spec: size style color, e.g. dashed "1px solid #D00000")    #87B296        #D00000        #103F10
    this.padding = 4;                    // padding (pixels)
    this.opacity = 80;                    // opacity (1 - 100); not supported by all browsers
    this.cursorDistance = 15;            // distance from mouse cursor (pixels)
    this.xPos = "right";                // horizontal position: "left" or "right"
    this.yPos = "bottom";                // vertical position: "top" or "bottom"

    // don't change
    this.text = '';
    this.height = 0;
    this.obj = null;
    this.active = false;

//----------------------------------------------------------------------------------------------------
// Methods
//----------------------------------------------------------------------------------------------------
    this.create = function() {
        if(!this.obj) this.init();

        this.obj.style.border = this.border;
        this.obj.style.padding = this.padding + 'px';
        if(this.width) this.obj.style.width = this.width + 'px';
        if(this.height) this.obj.style.height = this.height + 'px';
        if(this.textFont) this.obj.style.fontFamily = this.textFont;
        if(this.textSize) this.obj.style.fontSize = this.textSize + 'px';
        if(this.textColor) this.obj.style.color = this.textColor;
        if(this.textAlign) this.obj.style.textAlign = this.textAlign;
        if(this.bgColor) this.obj.style.backgroundColor = this.bgColor;

        this.obj.innerHTML = this.text;
        this.height = this.obj.offsetHeight;

        this.setOpacity();
        this.move();
        this.show();
    }

    this.init = function() {
        this.obj = document.getElementById('ToolTip');
        if(this.obj) document.body.removeChild(this.obj);
        this.obj = document.createElement('div');
        this.obj.id = 'ToolTip';
        this.obj.style.position = 'absolute';
        this.obj.style.visibility = 'hidden';
        this.obj.style.cursor = 'pointer';
        this.obj.style.boxSizing = 'border-box';
        this.obj.style.MozBoxSizing = 'border-box';
        this.obj.style.msBoxSizing = 'border-box';
        this.obj.style.webkitBoxSizing = 'border-box';
        this.obj.onmouseover = function() { tooltip.show(); }
        this.obj.onmouseout = function() { tooltip.hide(); }
        this.obj.onclick = function() { tooltip.hide(); }
        document.body.appendChild(this.obj);
    }

    this.move = function() {
        var winX = getWinX() - (((GK && !SA) || OP) ? 17 : 0);
        var winY = getWinY() - (((GK && !SA) || OP) ? 17 : 0);
        var x = mouseX;
        var y = mouseY;

        if(this.xPos == 'left') {
            if(x - this.width - this.cursorDistance < getScrX())
                x = getScrX();
            else x -= this.width + this.cursorDistance;
        }
        else {
            if(x + this.width + this.cursorDistance > winX + getScrX())
                x = winX + getScrX() - this.width;
            else x += this.cursorDistance;
        }

        if(this.yPos == 'top') {
            if(y - this.height - this.cursorDistance < getScrY())
                y = getScrY();
            else y -= this.height + this.cursorDistance;
        }
        else {
            if(y + this.height + this.cursorDistance > winY + getScrY())
                y = winY + getScrY() - this.height;
            else y += this.cursorDistance;
        }
        this.obj.style.left = x + 'px';
        this.obj.style.top = y + 'px';
    }

    this.show = function() {
        this.obj.style.zIndex = 69;
        this.active = true;
        this.obj.style.visibility = 'visible';
    }

    this.hide = function() {
        this.obj.style.zIndex = -1;
        this.active = false;
        this.obj.style.visibility = 'hidden';
    }

    this.setOpacity = function() {
        this.obj.style.opacity = this.opacity / 100;
        this.obj.style.MozOpacity = this.opacity / 100;
        this.obj.style.KhtmlOpacity = this.opacity / 100;
        this.obj.style.filter = 'alpha(opacity=' + this.opacity + ')';
    }
}

//----------------------------------------------------------------------------------------------------
// Global functions
//----------------------------------------------------------------------------------------------------
function getScrX() {
    var offset = 0;
    if(window.pageXOffset)
        offset = window.pageXOffset;
    else if(document.documentElement && document.documentElement.scrollLeft)
        offset = document.documentElement.scrollLeft;
    else if(document.body && document.body.scrollLeft)
        offset = document.body.scrollLeft;
    return offset;
}

function getScrY() {
    var offset = 0;
    if(window.pageYOffset)
        offset = window.pageYOffset;
    else if(document.documentElement && document.documentElement.scrollTop)
        offset = document.documentElement.scrollTop;
    else if(document.body && document.body.scrollTop)
        offset = document.body.scrollTop;
    return offset;
}

function getWinX() {
    var size = 0;
    if(window.innerWidth)
        size = window.innerWidth;
    else if(document.documentElement && document.documentElement.clientWidth)
        size = document.documentElement.clientWidth;
    else if(document.body && document.body.clientWidth)
        size = document.body.clientWidth;
    else size = screen.width;
    return size;
}

function getWinY() {
    var size = 0;
    if(window.innerHeight)
        size = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
        size = document.documentElement.clientHeight;
    else if(document.body && document.body.clientHeight)
        size = document.body.clientHeight;
    else size = screen.height;
    return size;
}

function getMouseXY(e) {
    if(e && e.pageX != null) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
    else if(event && event.clientX != null) {
        mouseX = event.clientX + getScrX();
        mouseY = event.clientY + getScrY();
    }
    if(mouseX < 0) mouseX = 0;
    if(mouseY < 0) mouseY = 0;
    if(tooltip && tooltip.active) tooltip.move();
}

function toolTip(text, size, opacity, padding, border) {
    if(typeof text != 'undefined') {
        tooltip = new TOOLTIP();
        tooltip.text = text;
        if(size) {
            size = '' + size;
            var s = size.split(':');
            if(s[0]) tooltip.width = parseInt(s[0]);
            if(s[1]) tooltip.height = parseInt(s[1]);
        }
        if(opacity) tooltip.opacity = opacity;
        if(typeof padding != 'undefined') tooltip.padding = padding;
        if(typeof border != 'undefined') tooltip.border = border;
        tooltip.create();
    }
    else if(tooltip) tooltip.hide();
}

//----------------------------------------------------------------------------------------------------
// Event handlers
//----------------------------------------------------------------------------------------------------
var mouseX = mouseY = 0;
document.onmousemove = getMouseXY;

//----------------------------------------------------------------------------------------------------

La preparazione delle tooltip

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$mess_0 
"Questa &egrave; una tooltip con valori di default.<br />I parametri della funzione JS non sono indicati.";

$mess_1 "In questa Tooltip sono indicati questi parametri:<br />text, size, opacity, padding<br />text (tutto quel che si legge), width = 350, 100, 10";

$mess_2 "In questa Tooltip sono indicati questi parametri:<br />text, size, opacity, padding, border<br />text (tutto quel che si legge), width = 400, 100, 10, \'5px solid #87B296\'";

$mess_3 "<img src=\'images/archimede_1.jpg\' />";

$mess_4 "<b>Gli Oggetti nel box</b>:<br /><img src=\'images/archimede_1.jpg\' alt=\'demo\' /><br />Questa Tooltip dimostrativa<br />Gli argomenti:<br />text (immagine e quel che si legge), width = 276, 100, \'10:10\', \'5px solid #87B296\'";

$mess_5 "<b>Gli Oggetti nel box</b>:<br /><img src=\'images/archimede_1.jpg\' alt=\'demo\' /><br />Questa Tooltip dimostrativa";

$mess_6 "<div class=\'note\'>Qui di seguito un testo riempitivo da mostrare nella Tooltip.</div><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>";
?>

 

Alcuni esempi

La funzione viene richiamata con questi parametri: toolTip(text, size, opacity, padding, border). Qui di seguito vengono mostrati alcuni esempi per usare questa tooltip.
Gli eventi onmouseover e onmouseout possono essere applicati a qualsiasi tag HTML.

1
2
3
<span onmouseover="toolTip('<?php echo $mess_0?>')" onmouseout="toolTip()"><strong>Un semplice esempio:</strong></span>
<span onmouseover="toolTip('<?php echo $mess_1?>', width = 350, 100, 10)" onmouseout="toolTip()"><strong>Un secondo esempio</strong></span>
<span onmouseover="toolTip('<?php echo $mess_2?>', width = 400, 100, 10, '5px solid #87B296')" onmouseout="toolTip()"><strong>Un terzo esempio:</strong></span>

 

Un semplice esempio: senza nessun parametro vengono accettati quelli di default.

onmouseover="toolTip('<?php echo $mess_0; ?>')" onmouseout="toolTip()"

Un secondo esempio: come parametri vengono usati text, size, opacity, padding. Il bordo usato è quello di default.

onmouseover="toolTip('<?php echo $mess_1; ?>', width = 350, 100, 10)" onmouseout="toolTip()"

Un terzo esempio: come parametri vengono usati text, size, opacity, padding, border.

onmouseover="toolTip('<?php echo $mess_2; ?>', width = 400, 100, 10, '5px solid #87B296')" onmouseout="toolTip()"

Ora vediamo come visualizzare i messaggi e le immagini

Visualizza la sola immagine: come parametri sono usati text, size, opacity. Gli ultimi due parametri sono stati impostati a NULL.
Nonostante le dimensioni dell'immagine siano di 256px × 332px, si è dovuto aumentare la dimensione del quadro di 10px per tenerla centrata

onmouseover="toolTip('<?php echo $mess_3; ?>', '266:342', 100, '','')" onmouseout="toolTip()"

Visualizza l'immagine e la didascalia sia sopra che sotto: Come parametri sono usati text, size, opacity, padding, border.
Come dimensione è stata impostata la sola width per permettere al riquadro di allungarsi solo quel che serve.

onmouseover="toolTip('<?php echo $mess_4; ?>', width = 276, 100, '10:10', '5px solid #87B296')" onmouseout="toolTip()"

Altra prova: questi i parametri usati:

onmouseover="toolTip('<?php echo $mess_5; ?>', width = 350, 100, 10)" onmouseout="toolTip()"

Altra ancora: questa contiene moltissimo testo. La tooltip supporta anche un div.

onmouseover="toolTip('<?php echo $mess_6; ?>', width = 350, 100, 10)" onmouseout="toolTip()"

 

 



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