工具提示显示在页面上其他元素的后面

时间：2020-09-04 09:16:18

标签： html css

请帮助我在悬停时显示我的工具提示。它们出现在其他“销售卡”的后面，而不是出现在顶部。参见下图。 Tooltip hides behind elements

我尽我所能想到的一切，但没有用； z-index，位置：绝对等。

可以在此链接上找到代码：

https://gray.fish/wp-packages

适用于此部分的CSS： 

.wp-package-usp-img {
  float: left;
  display: inline-block;
  margin-top: 1px;
}

.wp-package-usp-text { 
  margin-left: 35px;
  display: flex;
  margin-top: 30px;
}

.wp-package {
  padding: 30px 0px 30px 0px;
  width: 20vw;
  margin: 2vw;
  background: white;
  display: inline-block;
  border-radius: 20px;
  -webkit-box-shadow: 0px 10px 149px -65px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 10px 149px -65px rgba(0,0,0,0.35);
  box-shadow: 0 29px 99px rgba(0,0,0,0.1), 0 51px 54px rgba(0,0,0,0.1);
  vertical-align: top;
  transition: all .3s ease;
}

.wp-package:hover {
  transform: scale(1.05);
  transition: all .3s ease;
}

.wp-package-usp {
  display: inline-block;
}

.wp-package-wrapper {
  margin-top: 50px;
  margin-bottom: 100px;
}
.wp-package-price {
  color: #67BD9C;
}

.tooltip {
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  font-family: 'Trueno Light';
  visibility: hidden;
  width: 200px;
  background-color: #7ac9d1;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px 20px;
  position: absolute;
  z-index: 99999999999;
  bottom: 100%;
  left: 50%;
  margin-left: 50px;
  font-style: italic;
  font-size: .8rem;
  opacity: 0;
  transition: all .3s ease;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition: all .3s ease;
  text-align: left;
  font-family: 'Trueno Light';
  font-style: italic;
  font-size: .8rem;
  z-index: 99999999999999;
}

.tooltipI {
  font-family: 'Trueno Black';
  color: #7ac9d1;
  margin-left: 9px;
  margin-top: 3px;
  font-size: .8rem;
}

.tooltipI:hover, .wp-package-usp-item:hover {
  cursor: help;
}

.green {
  color: #67BD9C !important;
}
.greenT {
  background-color: #67BD9C !important;
}
.recommended{
  background-color: #67BD9C;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.5rem;
  margin-top: 5px;
  margin-left: 10px;
  display: inline-block;
  position: absolute;
}
.recommendedMobile {
  display: none;
}

.tooltip {
    position: relative;
    display: block;
}

.tooltip .tooltiptext {
    font-family: 'Trueno Light';
    visibility: hidden;
    width: 200px;
    background-color: #7ac9d1;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px 20px;
    position: absolute;
    z-index: 99999999999;
    bottom: 100%;
    left: 50%;
    margin-left: 50px;
    font-style: italic;
    font-size: .8rem;
    opacity: 0;
    transition: all .3s ease;
}

HTML代码：

<div class="wp-package-wrapper">
  <div class="wp-package">
    <h2 class="wp-package-title">Maintain</h2>
    <h4 class="wp-package-price"><span style="font-size: 2rem;">€50</span> / month</h4>
    <div class="wp-package-details">
      <div class="wp-package-usp">
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/cloud-download.svg">
          <h4 class="wp-package-usp-text">1x Backup <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website and database will be backed up once every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/edit.svg">
          <h4 class="wp-package-usp-text">1x Website Edit <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">You can request an edit to your website (code) once every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/plugin.svg">
          <h4 class="wp-package-usp-text">1x Plugins Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's plugins will be updated once every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/paint-roller.svg">
          <h4 class="wp-package-usp-text">1x Theme Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's theme files will be updated once every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/chip.svg">
          <h4 class="wp-package-usp-text">1x Core Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's core (WordPress files) will be updated once every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/phone.svg">
          <h4 class="wp-package-usp-text">Emergency Support <span class="tooltipI green">i</span></h4>
          <span class="tooltiptext greenT">When something bad happens to your website, it will be fixed right away.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="wp-package" style="transform: scale(1.17);">
    <h2 class="wp-package-title recTitle">Protect <span class="recommended">Recommended</span></h2>
    <h2 style="margin-top: 0px;" class="recommendedMobile">Recommended</h2>
    <h4 class="wp-package-price"><span style="font-size: 2rem;">€75</span> / month</h4>
    <div class="wp-package-details">
      <div class="wp-package-usp">
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/cloud-download.svg">
          <h4 class="wp-package-usp-text">4x Backup <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website and database will be backed up once every week.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/edit.svg">
          <h4 class="wp-package-usp-text">2x Website Edit <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">You can request an edit to your website (code) twice every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/plugin.svg">
          <h4 class="wp-package-usp-text">2x Plugins Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's plugins will be updated twice every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/paint-roller.svg">
          <h4 class="wp-package-usp-text">2x Theme Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's theme files will be updated twice every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/chip.svg">
          <h4 class="wp-package-usp-text">2x Core Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's core (WordPress files) will be updated twice every month.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/phone.svg">
          <h4 class="wp-package-usp-text">Emergency Support <span class="tooltipI green">i</span></h4>
          <span class="tooltiptext greenT">When something bad happens to your website, it will be fixed right away.</span>
        </div>
      </div>
    </div>
  </div>

  <div class="wp-package">
    <h2 class="wp-package-title">Perform</h2>
    <h4 class="wp-package-price"><span style="font-size: 2rem;">€100</span> / month</h4>
    <div class="wp-package-details">
      <div class="wp-package-usp">
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/cloud-download.svg">
          <h4 class="wp-package-usp-text">30x Backup <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website and database will be backed up once every day.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/edit.svg">
          <h4 class="wp-package-usp-text">4x Website Edit <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">You can request an edit to your website (code) once every week.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/plugin.svg">
          <h4 class="wp-package-usp-text">4x Plugins Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's plugins will be updated once every week.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/paint-roller.svg">
          <h4 class="wp-package-usp-text">4x Theme Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's theme files will be updated once every week.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/chip.svg">
          <h4 class="wp-package-usp-text">4x Core Update <span class="tooltipI">i</span></h4>
          <span class="tooltiptext">Your website's core (WordPress files) will be updated once every week.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/phone.svg">
          <h4 class="wp-package-usp-text">Emergency Support <span class="tooltipI green">i</span></h4>
          <span class="tooltiptext greenT">When something bad happens to your website, it will be fixed right away.</span>
        </div>
        <div class="wp-package-usp-item tooltip">
          <img class="wp-package-usp-img" src="images/caution.svg">
          <h4 class="wp-package-usp-text">Priority Support <span class="tooltipI green">i</span></h4>
          <span class="tooltiptext greenT">Your website is our number one priority: any of your issues or remarks will be fixed first.</span>
        </div>
      </div>
    </div>
  </div>
</div>

0 个答案:

没有答案
相关问题
最新问题