【发布时间】：2023-01-26 23:13:23
【问题描述】：
我在标题中构建了一个模式，为了清楚起见，有一个工具提示向模式用户解释某些要点。
我遇到的问题是工具提示的行为不正确。当您的光标经过它时，工具提示文本重叠在模态上而不是悬停在它上面。
编辑* 我第一次尝试的预览 https://jsfiddle.net/rjfz47na/
功能代码：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.woocommerce-MyAccount-content:not(.content-edit-account) {
float: none;
margin: 0 0 30px 0;
width: 100%;
border: 1px solid #DEDEDE;
}
.woocommerce-account {
clear: both;
}
a, a:hover {
text-decoration: none;
}
a {
color: #2ea3f2;
}
h4 {
font-family: "DIN Next Slab Pro Bold", serif;
text-transform: uppercase;
color: #1b1b1b;
padding-bottom: 0;
}
h4 {
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
color: #333;
padding-bottom: 10px;
line-height: 1em;
font-weight: 500;
}
.woocommerce-account .ps-courses__image img {
height: auto;
width: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
<style>
body {
align-items: center;
background: #F1EEF1;
display: flex;
font-family: sans-serif;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
align-items: center;
/* background: #F1EEF1;
border: 1px solid #D2D1D4;
*/ display: flex;
height: 365px;
justify-content: center;
width: 700px;
}
.email {
background: #DEDBDF;
border-radius: 16px;
height: 32px;
overflow: hidden;
position: relative;
width: 180px;
text-align: center;
-webkit-tap-highlight-color: transparent;
transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
height 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.email:not(.expand) {
cursor: pointer;
}
.email:not(.expand):hover {
background: #C2C0C2;
}
.from {
position: absolute;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.from-contents {
display: flex;
flex-direction: row;
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.to {
opacity: 0;
position: absolute;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.to-contents {
transform: scale(.55);
transform-origin: 0 0;
transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.avatar {
border-radius: 12px;
height: 24px;
left: 18px;
position: relative;
top: -11px;
width: 85px;
}
.name {
font-size: 14px;
line-height: 32px;
width: 180px;
}
.top {
background: #2c5424;
display: flex;
flex-direction: row;
height: 70px;
transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
width: 700px;
}
.avatar-large {
border-radius: 21px;
height: 42px;
margin-left: 12px;
position: relative;
top: 26px;
width: 100px;
color: #FFFFFF;
}
.name-large {
color: #ffffff;
font-size: 16px;
line-height: 70px;
margin-left: 100px;
}
.x-touch {
align-items: center;
align-self: center;
cursor: pointer;
display: flex;
height: 50px;
justify-content: center;
margin-left: auto;
width: 50px;
}
.x {
background: #ffffff;
border-radius: 10px;
height: 20px;
position: relative;
width: 20px;
}
.x-touch:hover .x {
background: #E1D9D1;
}
.line1 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(45deg);
width: 2px;
}
.line2 {
background: #2C5424;
height: 12px;
position: absolute;
transform: translateX(9px) translateY(4px) rotate(-45deg);
width: 2px;
}
.bottom {
background: #FFF;
color: #444247;
font-size: 14px;
height: 295px;
padding-top: 5px;
width: 700px;
overflow-y: auto;
}
.row {
align-items: center;
display: flex;
flex-direction: row;
height: 85px;
}
.twitter {
margin-left: 16px;
height: 30px;
position: relative;
top: 0px;
width: 30px;
}
.medium {
height: 30px;
margin-left: 16px;
position: relative;
width: 30px;
}
.link {
margin-left: 16px;
}
.link a {
color: #444247;
text-decoration: none;
}
.link a:hover {
color: #777579;
}
.email.expand {
border-radius: 6px;
box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.16);
height: 365px;
width: 700px;
}
.expand .from {
opacity: 0;
transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.expand .from-contents {
transform: scale(1.91);
}
.expand .to {
opacity: 1;
transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.expand .to-contents {
transform: scale(1);
}
.p2{
padding: 0 12px;
}
/* button div */
#buttons {
padding-top: 50px;
text-align: center;
}
/* start da css for da buttons */
.btn {
border-radius: 5px;
padding: 1px 5px;
font-size: 14px;
text-decoration: none;
color: #fff;
position: relative;
display: inline-block;
cursor: pointer;
}
.btn:active {
transform: translate(0px, 5px);
-webkit-transform: translate(0px, 5px);
box-shadow: 0px 1px 0px 0px;
}
.green {
background-color: #15B358;
box-shadow: 0px 3px 0px 0px #218838;
}
.green:hover {
background-color: #28a745;
}
.red {
background-color: #e74c3c;
box-shadow: 0px 3px 0px 0px #CE3323;
}
.red:hover {
background-color: #dc3545;
}
.black {
background-color: #343a40;
box-shadow: 0px 5px 0px 0px #23272b;
font-size: 16px;
padding: 3px 12px;
}
.black:hover {
background-color: #23272b;
}
input {
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
}
.tooltip {
position: relative;
background: #FFFFFF;
padding: 5px 10px;
margin: 5px;
font-size: 15px;
border-radius: 100%;
color: #2c5424;
animation: shake 500ms ease-in-out forwards;
}
.tooltip:before,
.tooltip:after {
position: absolute;
content: "";
opacity: 0;
transition: all 0.4s ease;
}
.tooltip:before {
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
top: -15px;
transform: translateY(20px);
}
.tooltip:after {
content: attr(data-tooltip);
background: #2c5424;
width: 350px;
height: 95px;
font-size: 13px;
font-weight: 300;
top: -130px;
left: -10px;
padding: 10px;
border-radius: 5px;
letter-spacing: 1px;
transform: translateY(20px);
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateY(-2px);
}
@keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="email expand" onclick="this.classList.add('expand')">
<div class="from">
<div class="from-contents">
<div class="name">Assign Backup Cards</div>
</div>
</div>
<div class="to">
<div class="to-contents">
<div class="top">
<div class="avatar-large"><strong>HEADS UP!</strong></div>
<div class="name-large"><b>
You have <span id="card-count-total">3</span> unassigned Backup Cards.
</b>
<span class="tooltip" data-tooltip="This feature will allow you to assign your available pool of unassigned safety cards to either your course or courses you have purchased and sent out to other individuals. Once assigned, the cards will be mailed out when the course is completed.">?</span>
</div>
<div class="x-touch" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
<div class="x">
<div class="line1"></div>
<div class="line2"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6@yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6@yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6@yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row">
<div style="display: flex">
<div style="flex-shrink: 1;">
<div class="ps-courses__image">
</div>
</div>
<div style="padding-top: 26px; flex-grow: 1; flex-shrink: 0; display: grid; grid-template-columns: max-content 2fr 1fr; grid-auto-flow: column; text-align: center;">
<div style="text-align: left;padding-left: 10px;padding-bottom: 20px;">
<div style="
padding-left: 0px;
"> Test! Online Course </div>
<div> Voucher: HYH65-GF3C8 </div>
<div> Email: s***6@yahoo.com </div>
<a onclick="bcr_addCard('JN3SU-GF3C8')" class="btn green">Add Card</a>
<a onclick="bcr_removeCard('JN3SU-GF3C8')" class="btn red">Remove Card</a>
</div>
<div>
<span class="card-count" data-voucher="JN3SU-GF3C8">0</span> Cards
</div>
<div><b>This is your course </b></div>
</div>
</div>
</div>
<hr>
<div class="row" style="display: flex; justify-content: center;">
<a href="#" class="btn black">Submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
编辑*：我试图让工具提示的行为像https://jsfiddle.net/dnu297g1/3/ 中看到的那样，同时保持工具提示的位置与我最初的尝试相同。将它放在右侧模态标题的旁边。
HTML:
<form>
<div>
<span class="tooltip" data-tooltip="This feature will allow you to assign your available pool of unassigned safety cards to either your course or courses you have purchased and sent out to other individuals. Once assigned, the cards will be mailed out when the course is completed.">?</span>
</div>
</form>
CSS：
body {
background: #424B54;
font-family: "Source Sans Pro", sans-serif;
overflow: hidden;
}
form {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100vh;
}
input {
border: none;
width: 170px;
height: 25px;
outline: none;
padding-left: 10px;
}
.tooltip {
position: relative;
background: #2c5424;
padding: 5px 12px;
margin: 5px;
font-size: 15px;
border-radius: 100%;
color: #FFF;
}
.tooltip:before,
.tooltip:after {
position: absolute;
content: "";
opacity: 0;
transition: all 0.4s ease;
}
.tooltip:before {
border-width: 10px 8px 0 8px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
top: -15px;
transform: translateY(20px);
}
.tooltip:after {
content: attr(data-tooltip);
background: #2c5424;
width: 350px;
height: 95px;
font-size: 13px;
font-weight: 300;
top: -130px;
left: -10px;
padding: 10px;
border-radius: 5px;
letter-spacing: 1px;
transform: translateY(20px);
}
.tooltip:hover::before,
.tooltip:hover::after {
opacity: 1;
transform: translateY(-2px);
}
【问题讨论】：
-
你能在这里发布一个工作示例吗？