Javascript jquery将内容锚定到某一点
我在我的网站上有一个链接列表,当用户点击其中一个链接时,我会显示一个带有更多选项的工具提示,链接显示为90x60图像,我希望显示的工具提示将自身锚定在已点击的链接/图像的左上角如何实现这一点,下面是我当前的实现Javascript jquery将内容锚定到某一点,javascript,jquery,html,css,dom-manipulation,Javascript,Jquery,Html,Css,Dom Manipulation,我在我的网站上有一个链接列表,当用户点击其中一个链接时,我会显示一个带有更多选项的工具提示,链接显示为90x60图像,我希望显示的工具提示将自身锚定在已点击的链接/图像的左上角如何实现这一点,下面是我当前的实现 $('#wrapper #content ul li a').click(function(e) { e.preventDefault(); $('#tooltip').remove(); var url = $(this).attr('href'); $
$('#wrapper #content ul li a').click(function(e) {
e.preventDefault();
$('#tooltip').remove();
var url = $(this).attr('href');
$.ajax({
type: "POST",
url: url,
data: "",
success: function(html){
var popup = html;
$('#content').append(popup);
$('#tooltip').css({
position: "absolute",
top: e.pageY - 200,
left: e.pageX - 10
});
}
});
});
任何帮助都将不胜感激。已经有了jquery插件: 还有更多 或者您可以编写一些简单的jQ脚本: (HTML) 使用qTip
$(document).ready(function() {
$("#qtip").qtip({
content: 'ToolTip',
style: {
name: 'red'
},
show: 'mousedown',
hide: 'mouseout',
position: {
target: 'mouse',
adjust: {
mouse: true,
x: -180,
y: -30,
}
}
});
});
更新:这是我的
$(document).ready(function() {
$('.tooltipped').click(function(){
$('#tooltip').remove();
$('body').append('<div id="tooltip" class="tooltip">This is tooltip</div>');
var p = $(this).position();
$('#tooltip').css({top: p.top, left: p.left+$(this).width()});
});
});
.box { border: 1px solid green; width: 90px; height: 60px; }
.tooltip { border: 1px solid red; width: 50px; height: 50px; position: absolute; }
$(document).ready(function() {
$("#qtip").qtip({
content: 'ToolTip',
style: {
name: 'red'
},
show: 'mousedown',
hide: 'mouseout',
position: {
target: 'mouse',
adjust: {
mouse: true,
x: -180,
y: -30,
}
}
});
});