JQuery的工具提示疑惑/问题 [英] JQuery tooltip doubts/questions
问题描述
我正在开发一个last.fm小部件，其中一个必要条件是，对于显示某个标签（流派）的每个轨道，必须存在一个小按钮。这是为了当点击按钮时出现一个工具提示，显示关于某个艺术家，他们的专辑和他们最受欢迎的曲目的更多信息。这一切都是通过Ajax请求完成的。
我的网页是实时的这里。除了工具提示之外，我已设法让所有工作都能正常工作，当有人点击每条曲目旁边的小'i'按钮图标时，我想显示该工具提示。
有些问题出现了，但：
- 我需要提取数据从last.fm和Ajax获取工具提示，然后定位工具提示，以便根据按下的按钮自动切换。
我的显示每条曲目旁边'i'图标的代码就是这样（相对CSS定位后）：
Ajax函数根据已选择多少个轨道创建X个按钮。但是，从我读过的内容来看，只有一个工具提示应该在任何标签之外（但当然是在< body 标签内）创建，并且应该移动编程。这是正确的方法吗？
我也注意到，似乎有大量的JQuery插件来处理工具提示，并且我还没有设法得到一个是因为问题1） - 我不知道如何定位它们，所以如果我把标签放在我的重复轨道之外，它们会显示在我的页面的随机位置< div> 's和甚至根本不会显示，如果我将它放在那些标记中。你认为哪个是最好的插件来处理/创建工具提示？我想要一些干净的东西，并且很容易处理自动定位。
感谢您的阅读，我希望有人能够帮助我。
b $ b这是一个基本的例子。它实际上很简单，但显然不知道完整的用户场景会有问题，需要你调整。
演示： http://jsfiddle.net/dj9xS/3/
问题：
- 不检测窗口的边，所以工具提示可能在窗口外。
- 没有事件可以使工具提示消失，而不必再次点击i图像。
HTML：
< style>
dl {width：300px;保证金：0汽车; }
.lfm_info {position：relative;宽度：16px; }
.tooltip {display：none;背景：黑色; width：120px;位置：绝对;底部：20px;剩下：50％; margin-left：-68px;颜色：#fff;填充：10px; }
< / style>
< dl>
< dt class =lfm_art>
< img src =http://userserve-ak.last.fm/serve/34s/42739473.pngalt =艺术品加州>< img src =http：// userserve -ak.last.fm/serve/34s/42739473.pngalt =Artwork de Californication>< / dt>
< dd class =lfm_song> 2。 Californication2。加州靡情< / DD>
< dd class =lfm_artist>红辣椒辣椒红辣椒< / dd>
< dd class =lfm_info>< img src =http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png>< div class =tooltip>< / div>< / dd>
< / dl>
< dl id =ajaxReference>
< dt class =lfm_art>
< img src =http://userserve-ak.last.fm/serve/34s/42739473.pngalt =艺术品加州>< img src =http：// userserve -ak.last.fm/serve/34s/42739473.pngalt =Artwork de Californication>< / dt>
< dd class =lfm_song> 2。 Californication2。加州靡情< / DD>
< dd class =lfm_artist>红辣椒辣椒红辣椒< / dd>
< dd class =lfm_info>< img src =http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png>< div class =tooltip>< / div>< / dd>
< / dl>
jQuery：
<$点击（函数（）{
var toolTip = $（this）.children（'。tooltip'）;
$ b（$。code> $（'。lfm_info'）。 $ b //使用AJAX
获取数据//不知道你是如何请求数据的，也许是唯一的ID？需要放入每个轨道dl到
//引用，例如$（this）.parent （）.attr（'id'）;
//如果成功填充到$（this）.children（'。tooltip'）
// $（this）.children的工具提示（'.tooltip'）。text（ajaxData）;
toolTip.text（'Hello World'）;
//如果失败
//返回false ;
if（toolTip.is（'：visible'））{
toolTip.fadeOut（500）;
return false;
};
//检查是否有其他工具提示可见
if（$（'。tooltip'）。is（'：visible'））{
$（'。tooltip' ）.fadeOut（500，function（）{
toolTip.fadeI （500）;
}）;
} else {
toolTip.fadeIn（500）;
};
））;
我希望这会对您有所帮助。
I'm developing a last.fm widget, and one of the requisites is, for each track that is displayed of a certain tag (genre), a small button must be present. This is so that a tooltip appears when the button is clicked, showing more information about a certain artist, their albums, and their most popular track. This is all done with Ajax requests.
My page is live here. I have managed to get everything working except the tooltip, which I'd like to get showing when someone clicks the little 'i' button icon next to each track.
Some questions arise, though:
- I will need to fetch the data from last.fm with Ajax for the tooltip and then position the tooltip so that it shifts automatically according to the button that's pressed.
My code that shows the 'i' icon next to each track is just this (positioned relatively with CSS after):
<dd class="lfm_info"><img src="images/info.png" /></dd>
The Ajax function creates X buttons depending on how many tracks have been selected. However, from what I've been reading, only one tooltip should be created, outside any tags (but inside the <body tag, of course) and this should be shifted programmatically. Is this the correct approach?
I've also noticed that there seems to be a huge amount of JQuery plugins to handle tooltips, and I've not managed to get even one to work because of issue 1) - I don't know how to position them, so they show up in random places of my page if I place the tags outside my repeating track <div>'s, and don't even show up at all if I place it inside those said tags. Which do you think is the best plugin to handle/create tooltips? I'd like something clean, and that handles automatic positioning easily.
Thank you for reading, and I hope someone may be able to assist me.
Here is a basic example. It's actually really simple, but obviously without knowing the full user scenario there will be issues with it that will require you to tweak.
Demo: http://jsfiddle.net/dj9xS/3/
The problems:
- Doesn't detect sides of window, so tool tip could potentially be outside of window.
- There is no event to make tool tip disappear without clicking on "i" image again.
HTML:
<style>
dl { width: 300px; margin: 0 auto; }
.lfm_info { position: relative; width: 16px; }
.tooltip { display: none; background: black; width: 120px; position: absolute; bottom: 20px; left: 50%; margin-left: -68px; color: #fff; padding: 10px; }
</style>
<dl>
<dt class="lfm_art">
<a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
<img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
<dd class="lfm_song">2. Californication2. Californication</dd>
<dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
<dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="tooltip"></div></dd>
</dl>
<dl id="ajaxReference">
<dt class="lfm_art">
<a href="http://www.last.fm/music/Red+Hot+Chili+Peppers/_/Californication" title="Clique para ouvir Californication no last.fm" target="_blank"></a>
<img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"><img src="http://userserve-ak.last.fm/serve/34s/42739473.png" alt="Artwork de Californication"></dt>
<dd class="lfm_song">2. Californication2. Californication</dd>
<dd class="lfm_artist">Red Hot Chili PeppersRed Hot Chili Peppers</dd>
<dd class="lfm_info"><img src="http://phpdev.dei.isep.ipp.pt/i101524/lastfm-widget/images/info.png"><div class="tooltip"></div></dd>
</dl>
jQuery:
$('.lfm_info').click(function(){
var toolTip = $(this).children('.tooltip');
// Get data using AJAX
// Not sure how you are requesting data, maybe by unique ID? Need to put into each track dl to
// reference. e.g. $(this).parent().attr('id');
// If success populate into tooltip on $(this).children('.tooltip')
// $(this).children('.tooltip').text(ajaxData);
toolTip.text('Hello World');
// If fail
// return false;
if(toolTip.is(':visible')){
toolTip.fadeOut(500);
return false;
};
// Check if any other tooltips are visible
if($('.tooltip').is(':visible')) {
$('.tooltip').fadeOut(500, function(){
toolTip.fadeIn(500);
});
} else {
toolTip.fadeIn(500);
};
});
I hope this is helpful for you though.
这篇关于JQuery的工具提示疑惑/问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
