只有當我刪除連結時,我才能看到帶有工具提示的 div 標籤。這兩者有何關係? div 內容未與連結一起出現。
.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; border-radius: 6px; } .tooltip:hover .tooltiptext { visibility: visible; } div#tdemo1 { animation-name: animate; animation-duration: 3s; width: 100px; height: 100px; background-color: red; } @keyframes animate { 0% { background-color: red; } 33% { background-color: yellow; } 66% { background-color: blue; } 99% { background-color: white; } }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <body style="background-image:linear-gradient(180deg,blue,violet);"> <div id="tdemo1" class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </div> <div id="bdemo1" class="container"> <h1>types of buttons in bootstrap:</h1> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div>
我嘗試使用帶有 div 標籤的工具提示並使用 bootstrap 顯示按鈕。一次只有其中之一出現正確。
P粉5117578482024-04-06 09:20:52
您需要更改 .tooltip
元素的類,因為 bootstrap
將其識別為 bootstrap
元素並重寫其自己的值它。
.tooltipp { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltipp .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; border-radius: 6px; } .tooltipp:hover .tooltiptext { visibility: visible; } div#tdemo1 { animation-name: animate; animation-duration: 3s; width: 100px; height: 100px; background-color: red; } @keyframes animate { 0% { background-color: red; } 33% { background-color: yellow; } 66% { background-color: blue; } 99% { background-color: white; } }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <body style="background-image:linear-gradient(180deg,blue,violet);"> <div id="tdemo1" class="tooltipp">Hover over me <span class="tooltiptext">Tooltip text</span> </div> <div id="bdemo1" class="container"> <h1>types of buttons in bootstrap:</h1> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> </div>