Javascript JQueryMobile中的弹出/工具提示位置
我想在鼠标器下显示一个工具提示。由于JQueryMobile没有任何用于此的小部件，因此我使用弹出小部件（非常接近） 显示弹出窗口时，我可以指定X和Y坐标。但问题是它基于X和Y将弹出窗口居中。我想将其显示在鼠标器的右侧，而不是鼠标器的正下方（因为光标位于鼠标器上方，因此文本很难读取）Javascript JQueryMobile中的弹出/工具提示位置,javascript,jquery-mobile,popup,tooltip,css-position,Javascript,Jquery Mobile,Popup,Tooltip,Css Position,我想在鼠标器下显示一个工具提示。由于JQueryMobile没有任何用于此的小部件，因此我使用弹出小部件（非常接近） 显示弹出窗口时，我可以指定X和Y坐标。但问题是它基于X和Y将弹出窗口居中。我想将其显示在鼠标器的右侧，而不是鼠标器的正下方（因为光标位于鼠标器上方，因此文本很难读取） 如何以这种方式显示弹出窗口？我唯一能想到的就是测量弹出元素的宽度，并根据弹出的宽度/高度校正坐标。但这似乎是不可能的，因为我只能在弹出窗口呈现到屏幕后测量实际宽度，并且我需要在显示弹出窗口之前指定X/Y。这似乎是一
如何以这种方式显示弹出窗口？我唯一能想到的就是测量弹出元素的宽度，并根据弹出的宽度/高度校正坐标。但这似乎是不可能的，因为我只能在弹出窗口呈现到屏幕后测量实际宽度，并且我需要在显示弹出窗口之前指定X/Y。这似乎是一个“第二十二条军规”的情况？正如问题下面的评论中所讨论的，这是一个完全可定制的本机/普通Javascript工具提示。直觉，即使我自己这么说。这是现场演示： 这是代码：
<!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>
由FC提供的轻量级工具提示
html{
字体大小：62.5%；
}
身体{
字体：普通1.3em Verdana；
背景色：白色；/*仅用于JSBin演示*/
}
氢{
文本对齐：居中；
边缘底部：2米；
}
span.工具{
位置：相对位置；
显示：内联块；
边框底部：1px黑色虚线；
}
工具：悬停{
光标：帮助；
}
翼尖{
位置：绝对位置；
底部：20px；
左：0px；
显示：块；
宽度：自动；
空白：nowrap；
字体大小：.9em；
边框：0px纯黑色；/*根据需要更改*/
边界半径：6px；
填充物：1px 5px；
背景：#eee；
背景：线性梯度（顶部、eee、ccc）；
背景：-moz线性梯度（顶部、eee、ccc）；
背景：-o-线性梯度（顶部，#eee，#ccc）；
背景：-webkit线性梯度（顶部，#eee，#ccc）；
背景：-webkit渐变（线性、左上、左下、从（#eee）到（#ccc））；
背景：-ms线性梯度（顶部、eee、ccc）；
过滤器：progid:DXImageTransform.Microsoft.Gradient（GradientType=0，StartColorStr=#eeeeee，EndColorStr=#cccc）；
缩放：1；
可见性：隐藏；
}
由FC提供的轻量级工具提示
世界卫生组织成立于1948年
这是该计划的一部分
联合国
联合国，
国际联盟的继任者
,
成立于1945年。
解释和“思想”：
- 该方法由局部嵌套跨距（“工具”内有“提示”）组成，相对绝对定位
- 如果在整个页面或网站中多次使用相同的提示，则可以使用Javascript或服务器端脚本集中填充提示范围
- 在当前代码中，提示的宽度设置为自动，并由提示文本中的brs控制。根据需要更改为固定宽度
- 使用当前代码，平板电脑用户必须点击（=onclick）而不是按住（=onmousedown）。假设这是大多数平板电脑用户所做的直观操作，但也可以更改为按住
- HTML是有效的，代码也可以在IE8中使用
- 据说GetElementsByCassName（类）返回一个动态节点列表，而querySelectorAll（.class）将返回一个静态节点列表。这将使后者不适合动态更新的元素/节。另外，据说它比第一个更慢/需要更多的CPU功率。但是，IE8（而不是IE7）支持querySelectorAll（.class）。小心点
- 为了完整性：当元素没有声明的边界或边界宽度为0时，IE9不会形成边界半径
//使IE8支持GetElementsByCassName的脚本：
如果（！document.getElementsByClassName）{
document.getElementsByClassName=函数（类）{
var elemArray=[]；
var elems=this.getElementsByTagName（'*'）；
对于（var i=0；我这里说的是普通的HTML/CSS/Javascript工具提示吗？那些用户悬停在一个单词上并弹出一个完全可自定义的工具提示的工具提示？如果是这样，我在几天前创建了一个符合这些要求的普通/本地Javascript工具提示。如果你感兴趣，请告诉我，我会发布代码。@FrankConijn一个普通工具提示p也可以