css 工具提示问题

utugiqy6  于 2023-01-27  发布在  其他
关注(0)|答案(1)|浏览(188)

我已经构建了一个模态，其中在头部有一个工具提示，为清晰起见，它向模态用户解释了某些要点。
我遇到的问题是工具提示不能正常工作。当你的光标经过它的时候，工具提示文本覆盖了模态，而不是停留在它上面。
Edit* 预览我在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(&#39;expand&#39;)">
      <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(&#39;.email&#39;).classList.remove(&#39;expand&#39;);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(&#39;JN3SU-GF3C8&#39;)" class="btn green">Add Card</a>
                            <a onclick="bcr_removeCard(&#39;JN3SU-GF3C8&#39;)" 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(&#39;JN3SU-GF3C8&#39;)" class="btn green">Add Card</a>
                            <a onclick="bcr_removeCard(&#39;JN3SU-GF3C8&#39;)" 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(&#39;JN3SU-GF3C8&#39;)" class="btn green">Add Card</a>
                            <a onclick="bcr_removeCard(&#39;JN3SU-GF3C8&#39;)" 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(&#39;JN3SU-GF3C8&#39;)" class="btn green">Add Card</a>
                            <a onclick="bcr_removeCard(&#39;JN3SU-GF3C8&#39;)" 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>

Edit*：我试图让工具提示的行为像在https://jsfiddle.net/dnu297g1/3/中看到的那样，同时保持工具提示的位置与我最初的尝试相同。
超文本：

<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);
}
css

1条答案

按热度按时间
06odsfpq

06odsfpq1#

下面是您想要实现的工作片段。我不得不对tooltip类的CSS代码做一些修改。
此外，我添加了一个div标记，其中id="anim"围绕着span标记，例如您在帖子中附加的jsfidle。
<div id="anim">所做的是触发shake HTML5动画，当您将鼠标悬停在工具提示span标签上时，该动画会轻微旋转。
希望能帮到你。

@keyframes shake {
  0% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  70% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

x一个一个一个一个x一个一个二个x

赞(0）分享  回复(0）举报  2023-01-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com