正如问题评论中所讨论的,本机/香草Javascript工具提示,可完全自定义。直观,即使我自己这么说。这是现场演示: http://jsbin.com/nerul/3/edit?html,output 。
这是代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Light-weight Tooltip by FC</title> <style> html { font-size: 62.5%; } body { font: normal 1.3em Verdana; background-color: white; /* just for the 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 as 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 by FC</h2> <p>The <span class="tool">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p> <p> It is part of the <span class="tool">UN <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span> </span>, which was established in 1945. </p> <hr> <p>Explanation and 'minds':</p> <ul> <li>The method consists of local nested spans ('tools' with 'tips' inside), positioned relative-absolute.</li> <li>If the same tips are to be used several times throughout the page or website, the tip spans can be populated centrally with Javascript or server-side scripting.</li> <li>In the current code the width of the tips is set to <i>auto</i>, and controlled with <br>s in the tip text. Change to fixed width as desired.</li> <li>With the current code tablet users must tap (= <i>onclick</i>) rather than press-hold (= <i>onmousedown</i>). It is assumed that that is the intuitive thing most tablet users do, but it can be changed to press-hold.</li> <li>The HTML is valid and the code also works in IE8.</li> <li>It is said that <i>getElementsByClassName(class)</i> returns a dynamic node list, whereas <i>querySelectorAll(.class)</i> would return a static one. That would make the latter unsuited for dynamically updated elements/sections. Also, it is said to be slower/require more CPU power than the first. However, <i>querySelectorAll(.class)</i> is supported by IE8 (not 7). Mind the dot.</li> <li>For the sake of completeness: IE9 does not form a border-radius when the element has no declared border, or a border-width of 0.</li> </ul> <script> // Script to make IE8 support getElementsByClassName: if (!document.getElementsByClassName) { document.getElementsByClassName = function(theClass) { var elemArray = []; var elems = this.getElementsByTagName('*'); for (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'); for (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>
。 凭借您的声誉,事情应该完全不言自明。如果没有,请告诉我。