×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Informačný web Mateja Lednára
Vytvárame riešenia

Ako vytvoriť tooltip s podporou elementov HTML

V rámci vývoja webového podnikové riešenia som sa dostal do situácie, kedy zákazník chcel aplikovať tooltip s podporou elementov jazyka HTML. Jednou z možností by bolo aplikovanie widgetu dijit/Tooltip. No toto riešenie by v súčasnom štádiu projektu bolo časovo náročné aplikovať, a tak som začal rozmýšľať nad niečím rýchlym a jednoducho aplikovateľným. Pôvodné riešenie tooltipu cez atribút title žiaľ v tomto prípade nebolo možné použiť no jeho podstata zostala zachovaná.
V rámci vývoja tooltipu som musel vyriešiť viaceré problémy, medzi ktoré patrila maximálna šírka tooltipu a jeho prispôsobovanie obsahu, unifikované umiestnenie, podpora elementov jazyka HTML či univerzálnosť a jednoduché použitie. Pre umiestnenie tooltipu som pôvodne chcel použiť jedno z nasledujúcich riešení.
Príklad: Riešenie č.1.
1
2
var posX = e.clientX;
var posY = e.clientY;
Príklad: Riešenie č.2.
1
2
var posX = e.pageX
var posY = e.pageY
Príklad: Riešenie č.3.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getCoords(node) {
var coords = {
x: node.offsetLeft,
y: node.offsetTop
};
while (node.offsetParent) {
coords.x = coords.x + node.offsetParent.offsetLeft;
coords.y = coords.y + node.offsetParent.offsetTop;
if (node == document.getElementsByTagName("body")[0]) {
break;
}
else {
node = node.offsetParent;
}
}
return coords;
}
Žiaľ ani jedno riešenie nespĺňalo požadované kritéria. Výsledkom bolo často nepredvídateľné umiestnenie tooltipu ako aj nepresné identifikovanie pozície kurzora pri kombinácii viacerých vrstiev cez vlastnosť display.
Pre vývoj tooltipu bolo dôležité definovať aj jeho rozmer. Aj tu nastal problém s kombináciou vrstiev a definovaním šírky tooltipu. Nakoniec sa navrhol riešenie pre maximálnu šírku 300px s podporou jednoriadkového aj viacriadkového tooltipu. Tooltip sa aktivuje atribútom data-tooltip. Keďže projekt je tvorený vo frameworku Dojo Toolkit, z tohto dôvodu aj prezentovaný návrh riešenia používa framework Dojo Toolkit.
Príklad: Zápis do elementu <style>.
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
.relative {
position : relative;
}
.absolute {
position : absolute;
}
.width-300 {
width : 300px;
}
.no-wrap {
white-space: nowrap;
}
.wrap-normal {
white-space: normal;
}
#globalTooltip {
font-weight : normal;
border : 1px solid #ddd;
background-color: #fafafa;
padding : 2px 6px;
font-size : 12px;
color : black;
z-index : 100;
}
Príklad: Zápis do elementu <body>.
1
2
<h1 data-tooltip="Test 1">Tooltip 1</h1>
<div data-tooltip="<i>Test 2</i>">Tooltip 2</div>
Príklad: Zápis do elementu <script>.
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
// Author : Matej Lednár (http://how-to.mldgroup.com)
require(["dojo/ready", "dojo/_base/array", "dojo/dom-construct",
"dojo/on", "dojo/query", "dojo/dom", "dojo/_base/lang",
"dojo/dom-attr", "dojo/dom-class", "dojo/dom-style",
"dojo/dom-geometry",
"dojo/parser"], function(ready, array, domConstruct, on, query,
dom, lang, domAttr, domClass, domStyle, domGeom) {
ready(function() {
tooltipTimer = null;
array.forEach(query("[data-tooltip]"), function(node, index) {
on(node, "mouseover", displayTooltip);
on(node, "mouseout", hideTooltip);
domAttr.set(node, "data-tooltip-registered", "true");
});
// global tooltip
function displayTooltip(e) {
function display(e) {
var node = e.target;
var tooltipValue = domAttr.get(node, "data-tooltip");
// tooltip must contain at least 1 character
if (tooltipValue.length > 0) {
domClass.add(node, "relative");
var tooltipTemplate = "<div id='globalTooltip'
class='absolute no-wrap'></div>";
domConstruct.place(tooltipTemplate, node, "first");
var tooltip = dom.byId("globalTooltip");
tooltip.innerHTML = tooltipValue;
var coords = domGeom.getContentBox(node);
domStyle.set(tooltip, {
left: 40 + "px",
top: +(coords.h + 6) + "px"
});
tooltip.innerHTML = tooltipValue;
// tooltip can be displayed as one line text
// or multiline text
// maximal width for one line is 300px
if (domStyle.get(tooltip, "width") > 300) {
domClass.remove(tooltip, "no-wrap");
domClass.add(tooltip, "width-300");
domClass.add(tooltip, "wrap-normal");
}
}
}
tooltipTimer = setTimeout(lang.partial(display, e), 500);
}
function hideTooltip(e) {
clearTimeout(tooltipTimer);
var node = e.target;
domClass.remove(node, "relative");
domConstruct.destroy("globalTooltip");
}
});
});
Tooltip je založený na časovači, takže nie je zobrazený hneď, ale až po pol sekunde. To znamená, že ak je kurzor na položke, ktorá disponuje tooltipom kratšie ako pol sekundy, tooltip nebude zobrazený.

Záver

Verím, že moje riešenie tooltipu si nájde uplatnenie aj na iných projektoch. Demonštrované riešenie je vhodné transformovať do widgetu. V prípade, že máte dáke "zlepšováky" alebo efektívnejšie riešenie tooltipu, podeľte sa oň prostredníctvom komentára.
Dojo,programovanie,JavaScript,tooltip
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších