如何正確定位添加元素與絕對位置？

所以我正在創建一個工具提示功能。基本上它附帶一個帶有工具提示文本的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

如何正確定位添加元素與絕對位置？

回答

相關問題