只有當我刪除連結時，我才能看到帶有工具提示的 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>