我想讓段落出現在鼠標懸停時。但是當我試著把代碼放到下面時，整段代碼并沒有出現，它只是顯示了部分內容。我想發生的是整個段落出現在懸停和所有的話是可見的。
我正在Weebly上為一個知識相對較少的學校項目制作一個網站。有辦法讓它工作嗎？
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
overflow-wrap: break-word;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}<center>
<br><br>
<div class="tooltip">Word
<span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus, leo sit amet maximus finibus, quam justo interdum dolor, ac auctor mi elit eu nisi. Praesent vel facilisis mi. Nulla non ligula eget nunc euismod consectetur porta a elit. Pellentesque sodales ipsum nibh, at pretium mi vehicula luctus. Morbi dapibus felis vitae dolor ultrices dapibus. Sed vestibulum a augue id ultricies. Etiam mi diam, hendrerit a quam id, convallis molestie urna. Nullam facilisis elit sit amet lobortis malesuada. Donec lacinia ante turpis, id laoreet risus egestas scelerisque. Aliquam at iaculis nisl. Donec nec venenatis neque. In mollis mauris laoreet pellentesque efficitur. Proin feugiat elit sit amet lacus commodo luctus. Donec rhoncus ipsum vel nibh feugiat, eget feugiat justo volutpat. Aenean et nunc nunc.</span>
</div>
</center>你的文字因為底部正被從頂部切掉:100%；它將文本容器的底部固定在工具提示的頂部，如果工具提示的頂部沒有足夠的空間，它將位于html頁面之外，因為它是position:absolute。因此，確保工具提示的頂部有足夠的空間 或者以一種方式放置內容，當它可見時，它有足夠的空間，檢查下面的代碼，我已經使用了top:0；我還刪除了& lt中心& gt標簽，因為它是貶值的，并在身體上增加了一些造型:
<html>
<head>
<style>
body {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 0;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">Word
<span class="tooltiptext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</body>
</html>您的代碼的問題是工具提示文本溢出，不能正確顯示。要使它工作，您可以將以下CSS規則添加到代碼中:
.tooltip {
white-space: nowrap; /* Prevent text wrapping */
}
.tooltip .tooltiptext {
white-space: normal; /* Allow text wrapping within the tooltip */
}