JQueryMobile中的弹出/工具提示位置
Popup/tooltip position in JQueryMobile
我想在mousecursor下面显示一个工具提示。因为JQueryMobile没有任何小部件,所以我使用了Popup小部件(它非常接近)。
在显示弹出窗口时,我可以指定X和Y坐标。但问题是它基于X和y的弹出框居中,我想把它显示在鼠标的右侧,而不是在它的正下方(因为光标在它上面,这会使文本难以阅读)。
如何以这种方式显示弹出窗口?我唯一能想到的是测量弹出元素的宽度,并根据弹出的宽度/高度修正坐标。但这似乎是不可能的,因为我只能在弹出窗口呈现到屏幕后测量实际宽度,而且我需要在弹出窗口显示之前指定X/Y。看起来像是进退两难吗?
正如问题下的评论所讨论的,一个原生/香草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>
。
以你的名声,事情应该是不言自明的。如果没有,请告诉我。
相关文章:
- 我可以't使用jQuery更改工具提示引导程序的位置
- highcharts:更改工具提示和阴影(悬停)的标准位置
- jQuery UI 工具提示位置的奇怪行为
- jQuery:使用插件Tipsy将工具提示附加到鼠标光标位置
- 有没有办法强制工具提示显示在输入元素的特定位置
- 如何在使用 Dojo 的 dijit 下拉按钮时更改工具提示的位置
- 如何动态更改基于目标元素的绝对工具提示的位置
- 更改提示工具提示的重力/位置
- Intro.js更改工具提示位置
- D3(具有引导程序网格布局)-工具提示位置关闭
- 在图形上的最后一个值上设置工具提示位置
- JQueryMobile中的弹出/工具提示位置
- nvd3工具提示位置基于鼠标指针使用JavaScript
- 更改工具提示位置/箭头
- .js步骤和工具提示位置工作正常,除了"back"被按下
- 更改窗口大小的工具提示位置
- JQuery UI工具提示位置
- 指定工具提示位置
- 使用AngularJS UI使工具提示位置相对于窗口大小
- nvd3 multiBarHorizontalChart中的工具提示位置