如何修復相對於文本框在HTML工具提示的位置？

當我點擊文本框內部的工具提示顯示，當我使用下面的JavaScript代碼和CSS退出文本框工具提示消失。問題在於頁面的滾動。工具提示的位置變化等於滾動值。如何修復HTML中文本框相對於工具提示的位置？如何修復相對於文本框在HTML工具提示的位置？

<style type="text/css"> 
    .tooltip { 
     visibility: hidden; 
     position: fixed; 
     width: 450px; 
     top: 0; 
     left: 0; 
     z-index: 2; 
     color: red; 
     background-color: #ffffe6; 
     font-family: 'B Yekan'; 
     font-size: 20px; 
     text-align: center; 
     padding: 1px; 
     border: solid 1px; 
     border-radius: 5px; 
     overflow:auto; 
    } 
</style> 
<script type="text/javascript"> 
    function tooltip_show(tooltipId, inputId) { 
     var inputField = document.getElementById(inputId); 
     var rectObject = inputField.getBoundingClientRect(); 
     var top = rectObject.top, left = rectObject.left; 
     var it = document.getElementById(tooltipId); 
     it.style.left = (left - it.offsetWidth/2 + inputField.offsetWidth/2) + 'px'; 
     it.style.top = (top + inputField.offsetHeight + 5) + 'px'; 
     var a = inputField.scrollTop; 
     it.style.visibility = 'visible'; 
    } 
    function tooltip_hide(tooltipId) { 
     var it = document.getElementById(tooltipId); 
     it.style.visibility = 'hidden'; 
    } 
</script>

來源

2017-06-03 Mohammad Tahaye Abadi

共享html代碼，請 – Ehsan

這提示純CSS創建。

body { 
 
    height:800px; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin-top: 50px; 
 
} 
 

 
.tooltip { 
 
    display: none; 
 
    background-color: #000; 
 
    position: absolute; 
 
    padding: 2px 5px; 
 
    border-radius: 10px; 
 
    color: orange; 
 
    top: -30px; 
 
    left: 60px; 
 
} 
 

 
.tooltip:before { 
 
    content: '\25bc'; 
 
    position: absolute; 
 
    top: 18px; 
 
    color: #000; 
 

 
} 
 

 
.txt:focus + .tooltip { 
 
    display: inline-block; 
 
}

<div class="container"> 
 
\t TextBox : <input type="text" class="txt"> 
 
\t <div class="tooltip">This is TextBox</div> 
 
</div>

來源

2017-06-03 07:10:26 Ehsan

感謝您的及時回覆和專業的解決方案。我檢查了代碼，它運行良好。如何確定文本框的位置以便爲CSS中的工具提示設置頂部和左側值。 –

如果您的文本框有固定的位置，您可以測試左側和頂部，並獲得完美的左側和頂部。 – Ehsan

如果我的帖子幫助你給我upvote並標記它，請。 – Ehsan

請使用絕對，而不是固定的位置。

除了上述內容，請注意您的解決方案，因爲如果您更改文本框本身的座標，工具提示將不會一起移動。

更好的解決方案是創建一個包裝元素，使其相對定位，並使用在提示的絕對位置。這樣，如果您移動包裝，工具提示將隨之移動。

來源

2017-06-03 06:40:58

我如何創建一個包裝元素？ –

對方回答包含包裝元素，它與級集裝箱股利。包裝是包圍我們想要的東西的任何元素。 –

如何修復相對於文本框在HTML工具提示的位置？

回答

相關問題