如何正确定位添加元素与绝对位置？

所以我正在创建一个工具提示功能。基本上它附带一个带有工具提示文本的div - 您点击的元素。但是，我怎样才能始终将此元素定位在点击广告的元素上方？如何正确定位添加元素与绝对位置？

$(document).ready(function() { 
 
    $('.tooltipTarget').click(function() { 
 
    var title = $(this).data('tooltip'); 
 
    if (!$('p.tooltip').hasClass('active')) { 
 
     $('<p class="tooltip active"></p>') 
 
     .text(title) 
 
     .appendTo($(this)); 
 

 
     $('.tooltip').addClass('test'); 
 
     $(document).on('click', function(e) { 
 
     if (e.target != $('.tooltipTarget')[0]) { 
 
      $('.tooltipTarget').trigger('click'); 
 
     } 
 
     }); 
 
    } else { 
 
     $(document).off('click'); 
 
     $('p.tooltip.active').fadeOut(250, function() { 
 
     $(this).remove(); 
 
     }); 
 
    } 
 
    }); 
 
});

.tooltip { 
 
    margin-top: -45px; 
 
    opacity: 1; 
 
    transition: 0.3s ease-in-out; 
 
    position: absolute; 
 
    border-radius: 1px; 
 
    color: #767676; 
 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
 
    background: #f7f7f7; 
 
    padding: 10px; 
 
    font-size: 12px; 
 
    text-align: left; 
 
    z-index: 10; 
 
    max-width: 250px; 
 
    &.active { 
 
    opacity: 1; 
 
    } 
 
} 
 
.tooltip::before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    z-index: 10; 
 
    bottom: -14px; 
 
    right: 50%; 
 
    right: calc(50% - 7px); 
 
    border-left: solid 7px transparent; 
 
    border-right: solid 7px transparent; 
 
    border-bottom: solid 7px transparent; 
 
    border-top: solid 7px #f7f7f7; 
 
} 
 
.tooltip::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    z-index: 9; 
 
    bottom: -15px; 
 
    right: 50%; 
 
    right: calc(50% - 7px); 
 
    border-left: solid 7px transparent; 
 
    border-right: solid 7px transparent; 
 
    border-bottom: solid 7px transparent; 
 
    border-top: solid 7px rgba(0, 0, 0, 0.2); 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>CSS3 tooltip</title> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 

 

 

 
</head> 
 

 
<body> 
 

 
    <button style="margin: 200px;" data-tooltip="This is a tooltipThis is a ltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tootooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThistooltipThis is a tooltip" 
 
    class="tooltipTarget">orempaks[djo[psad</button> 
 

 
</body> 
 

 
</html>

附：我不想使用基本的HTML标题功能。

来源

2015-09-01 Tachi

这应该为你工作...

button.tooltipTarget { 
position: relative; 
} 

p.tooltip.active { 
position: absolute; 
bottom: 100%; 
left: 50%; 
width: 400px; 
transform: translateX(-50%); 
}

来源

2015-09-01 09:27:14 Aaron

请试试这个：

CSS代码：

button.tooltipTarget { 
position: relative; 
} 
p.tooltip.active { 
position: absolute; 
bottom: 100%; 
left: 50%; 
width: 400px; 

transform: translateX(-50%); 
} 
.tooltip { 
    margin-top: -45px; 
    opacity: 1; 
    transition: 0.3s ease-in-out; 
    position: absolute; 
    border-radius: 1px; 
    color: #767676; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
    background: #f7f7f7; 
    padding: 10px; 
    font-size: 12px; 
    text-align: left; 
    z-index: 10; 
    max-width: 250px; 
    &.active { 
    opacity: 1; 
    } 
} 
.tooltip::before { 
    content: ''; 
    display: inline-block; 
    height: 0; 
    width: 0; 
    position: absolute; 
    z-index: 10; 
    bottom: -14px; 
    right: 50%; 
    right: calc(50% - 7px); 
    border-left: solid 7px transparent; 
    border-right: solid 7px transparent; 
    border-bottom: solid 7px transparent; 
    border-top: solid 7px #f7f7f7; 
} 
.tooltip::after { 
    content: ''; 
    display: inline-block; 
    height: 0; 
    width: 0; 
    position: absolute; 
    z-index: 9; 
    bottom: -15px; 
    right: 50%; 
    right: calc(50% - 7px); 
    border-left: solid 7px transparent; 
    border-right: solid 7px transparent; 
    border-bottom: solid 7px transparent; 
    border-top: solid 7px rgba(0, 0, 0, 0.2); 
}

DEMO

来源

2015-09-01 09:33:17

你刚才复制和粘贴我的代码花花公子???设置宽度和缩进都一样！ – Aaron

是的，你是绝对的家伙......你是一个天才..谢谢@Aaron –

您可以定义的确切位置你点击事件相对于一个容器元素，如果这会帮助...

可以GT单击元素的offset，PageX，PageY鼠标点击事件，并计算应该在哪里你的提示开始：

$('#container').click(function(e) { 
    var offset = $(this).offset(); 
    var top = e.pageY - offset.top; 
    var left = e.pageX - offset.left; 

    alert('OFFSET: ' + top + ', ' + left); 
    });

所以你提示的top和left可以通过这个计算设定。

See example

追加东西的容器在点击位置：Example 2（由于大多数的CSS）

来源

2015-09-01 09:58:00 DDan

sry，但我不想使用这个计算。 – Tachi

如何正确定位添加元素与绝对位置？

回答

相关问题