javascript - Popup/tooltip position in JQueryMobile -
i want show tooltip under mousecursor. since jquerymobile doesn't have widget this, use popup widget (which comes close).
when showing popup, can specify x , y coordinates. problem centers popup based on x , y. , want display on right-side of mousecursor, not right under (because makes text hard read because cursor on it).
how can show popup way? thing can think of measuring width of popup element, , correct coordinates based on width/height of popup. seems impossible, because can measure actual width after popup rendered screen, , need specify x/y before popup showed. seems catch 22 situation?
as discussed in comments under question, native/vanilla javascript tooltip, customizable. , intuitive, if myself. here live demo: http://jsbin.com/nerul/3/edit?html,output.
and code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>light-weight tooltip fc</title> <style> html { font-size: 62.5%; } body { font: normal 1.3em verdana; background-color: white; /* jsbin demo */ } h2 { text-align: center; margin-bottom: 2em; } span.tool { position: relative; display: inline-block; border-bottom: 1px dashed black; } span.tool:hover { cursor: help; } span.tip { position: absolute; bottom: 20px; left: 0px; display: block; width: auto; white-space: nowrap; font-size: .9em; border: 0px solid black; /* change desired */ border-radius: 6px; padding: 1px 5px; background: #eee; background: linear-gradient(top, #eee, #ccc); background: -moz-linear-gradient(top, #eee, #ccc); background: -o-linear-gradient(top, #eee, #ccc); background: -webkit-linear-gradient(top, #eee, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background: -ms-linear-gradient(top, #eee, #ccc); filter: progid:dximagetransform.microsoft.gradient(gradienttype=0,startcolorstr=#eeeeee,endcolorstr=#cccccc); zoom: 1; visibility: hidden; } </style> </head> <body> <h2>light-weight tooltip fc</h2> <p>the <span class="tool">who<span class="tip">world health organization</span></span> established in 1948.</p> <p> part of <span class="tool">un <span class="tip">united nations, <br>the successor of <br>league of nations</span> </span>, established in 1945. </p> <hr> <p>explanation , 'minds':</p> <ul> <li>the method consists of local nested spans ('tools' 'tips' inside), positioned relative-absolute.</li> <li>if same tips used several times throughout page or website, tip spans can populated centrally javascript or server-side scripting.</li> <li>in current code width of tips set <i>auto</i>, , controlled <br>s in tip text. change fixed width desired.</li> <li>with current code tablet users must tap (= <i>onclick</i>) rather press-hold (= <i>onmousedown</i>). assumed that intuitive thing tablet users do, can changed press-hold.</li> <li>the html valid , code works in ie8.</li> <li>it said <i>getelementsbyclassname(class)</i> returns dynamic node list, whereas <i>queryselectorall(.class)</i> return static one. make latter unsuited dynamically updated elements/sections. also, said slower/require more cpu power first. however, <i>queryselectorall(.class)</i> supported ie8 (not 7). mind dot.</li> <li>for sake of completeness: ie9 not form border-radius when element has no declared border, or border-width of 0.</li> </ul> <script> // script make ie8 support getelementsbyclassname: if (!document.getelementsbyclassname) { document.getelementsbyclassname = function(theclass) { var elemarray = []; var elems = this.getelementsbytagname('*'); (var i=0; i<elems.length; i++) { var allclasses = elems[i].classname; var classregex = new regexp('^('+theclass+')$|(\\s'+theclass+'\\b)'); // pattern demo on http://codepen.io/anon/pen/hhswl?editors=100 if (classregex.test(allclasses) == true) elemarray.push(elems[i]); } return elemarray; } } var tools = document.getelementsbyclassname('tool'); (var i=0; i<tools.length; i++) { var tool = tools[i]; if ('ontouchstart' in window || window.navigator.mspointerenabled) { tool.onclick = function() { if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden') this.children[0].style.visibility = 'visible'; else this.children[0].style.visibility = 'hidden'; } } else { tool.onmouseover = function() { this.children[0].style.visibility = 'visible'; } tool.onmouseout = function() { this.children[0].style.visibility = 'hidden'; } } } </script> </body> </html> .
reputation, matters should self-explanatory. if not, let me know.
Comments
Post a Comment