Показывать всплывающую подсказку над каждым элементом - PullRequest
Новая
       44

Показывать всплывающую подсказку над каждым элементом

0 голосов
/ 21 апреля 2020

картина проблемы:
picture of the problem

Итак, у меня есть эти таблицы цен. Я хочу иметь всплывающую подсказку в конце строки с надписью «3 бесплатных ревизии» (в самой левой ценовой таблице). Однако, как видите, в следующей таблице скрыты всплывающие подсказки. Кроме того, всплывающая подсказка отображается даже в том случае, если вы наводите указатель мыши на саму область, а не на маленький кружок подсказки, здесь приведена ссылка на код в codepen : shorturl.at / yHP19

Как я могу это исправить? Кроме того, сделать всплывающую подсказку в виде блока с двумя строками текста вместо одной длинной строки в блоке?

Я только начал изучать CSS и HTML, как 2 дня, а go, и я ' Я пытаюсь изменить этот шаблон настолько, насколько я могу, извините, если код грязный!

Код длинный и грязный, я думаю, но мне сказали опубликовать его здесь. 

@import url('https://fonts.googleapis.com/css?family=Roboto:300');
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
   font-family: 'Roboto', sans-serif;
}

.container {
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  -o-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  margin-top: 0%;
  margin-bottom: 0%;
  cursor: default;
}
    
.container .pricing__table {
  display: block;
  padding: 10px;
  background: #ccc;
  width: 300px;
  margin: 9px;
  border-radius: 30px;
  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  bottom: 0;
  transition: ease 0.4s;
}
.container .pricing__table:nth-child(1) {
  background-image: linear-gradient(135deg, #FCCF31 10%, #F55555 100%);
}
.container .pricing__table:nth-child(2) {
  background-image: linear-gradient(135deg, #F761A1 10%, #8C1BAB 100%);
}
.container .pricing__table:nth-child(3) {
  background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}
.container .pricing__table:nth-child(4) {
  background-image: linear-gradient(135deg, #FCCF31 10%, #43CBFF 100%);
}
/* .container .pricing__table:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.08);
  z-index: 100;
} */
    
.container .pricing__table:hover {
bottom: 13px;
/* border-radius: 10px; */
}

/*pricing__table .icon {
  display: block;
  width: 70px;
  height: 70px;
  background: #fff;
  text-align: center;
  line-height: 70px;
  font-size: 2.2em;
  margin: 20px auto;
  border-radius: 50px;
  -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}
.pricing__table .icon span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
} */
.pricing__table .type-01 {
  color: #FCCF31;
}
.pricing__table .type-02 {
  color: #F761A1;
}
.pricing__table .type-03 {
  color: #43CBFF;
}
.pricing__table .type-04 {
  color: #000;
}

.heading {
  color: #fff;
  text-align: center;
  text-transform: capitalize;
  font-weight: lighter;
  padding: 8px;
  font-size: 1.2em;
}

.service__price {
  color: #fff;
  text-align: center;
  font-size: 3em;
}
.service__price .dollar__sign {
  font-size: .5em;
  margin-left: -10px;
}
.heading .small__addition {
  font-size: .6em;
  margin-left: -10px;
}

.features__list {
  list-style: none;
  display: block;
  margin: 20px auto;
  width: 97%;
}
.features__list li {
  color: #fff;
  text-align: center;
  display: block;
  text-transform: capitalize;
  font-weight: lighter;
  font-size: .9em;
  height: 30px;
  line-height: 30px;
}

.order__button {
  border: solid 0px #8a8a8a;
  transition: ease 0.5s;
  display: block;
  width: 70%;
  height: 40px;
  margin: 5px auto;
  border-radius: 50px;
  -webkit-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  font-family: 'Roboto', sans-serif;
  text-transform: capitalize;
  text-align: center;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.5);
  background: #fff;
  cursor: pointer;
}
.order__button:hover {
  /* border-widtht: 2px; */
  width: 75%;
}
    
.lorder__button:focus {
  outline: none;
}



.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  width: max-content;
  height: max-content;
  transition: 0.5s;
  border-radius: 50%;
  animation: float 2s ease-in-out infinite;
}
    
@keyframes float {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-3.3px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
}

.tooltip .tooltiptext {
  opacity: 0;
  width: max-content;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  transition: 0.35s ease;  
  /* Position the tooltip */
  position: absolute;
  bottom: 110%;
  left: 50%;
  margin-left: -60px;
  z-index: 5;
}

.tooltip:hover .tooltiptext {
  opacity: 0.7;
}

.tooltip:hover {
  /box-shadow: 0 0 0 2px #fff;
}
<div class="container">
  <div class="pricing__table">
      <!-- <div class="icon type-01">
        <span class="fa fa-paper-plane" aria-hidden="true">
        </span>
      </div> THIS WAS THE ICON THINGY --> 
 	  <p><i class="fa fa-times" aria-hidden="true"></i></p> <!-- top spacing -->
      <h3 class="heading"><strong>Beat &amp; Vocals</strong></h3>
      <h1 class="service__price">
        <sup class="dollar__sign">$</sup>119
      </h1>
      <ul class="features__list">
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Vocals, professionally mixed to a 2-track beat
        </li>
          <li><i class="fa fa-check" aria-hidden="true">
          </i></li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> <strong>3 Free</strong> Revisions <div class="tooltip"><span>&#8858;</span><span class="tooltiptext">BRUH why are you hiding its annoying</span></div>
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Vocal Tuning / Auto-Tune
        </li>
        <li>
          <i class="fa fa-times" aria-hidden="true"></i>
          <span>&#10003;</span> Track Mastering
        </li>
        <li>
          <i class="fa fa-times" aria-hidden="true"></i>
          <span>&#8853;</span> <strong>Simple &amp; Intuitive</strong> Revisions Management
        </li>
          <li></li>
      </ul>
    <button class="order__button">
      <a target="_blank" rel="noopener noreferrer" href="https://www.everythingbydor.com/services-products/2-track-vocals-package">order now</a>
    </button>
  </div>
  
  
  <div class="pricing__table">
	<p><i class="fa fa-times" aria-hidden="true"></i></p> <!-- top spacing -->
    <h3 class="heading"><strong>standard</strong> <sup class="dollar__sign"><span>&#8859;</span> <u>Best Value</u></sup></h3>
      <h1 class="service__price">
        <sup class="dollar__sign">$</sup>149
      </h1>
      <ul class="features__list">
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Up to <strong>15 stems</strong> professionally mixed &amp; mastered
        </li>
          <li><i class="fa fa-check" aria-hidden="true">
          </i></li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> <strong>3 Free</strong> Revisions
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Vocal Tuning / Auto-Tune
        </li>
        <li>
          <i class="fa fa-times" aria-hidden="true"></i>
          <span>&#10003;</span> Track Mastering
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#8853;</span> <strong>Simple &amp; Intuitive</strong> Revisions Management
        </li>
        <li></li>
      </ul>
      <a target="_blank" rel="noopener noreferrer" href="https://www.everythingbydor.com/services-products/standard-package" class="order__button" >
      order now
    </a>
  </div>
  
  <div class="pricing__table">
	<p><i class="fa fa-times" aria-hidden="true"></i></p> <!-- top spacing -->
      <h3 class="heading"><strong>premium</strong></h3>
      <h1 class="service__price">
        <sup class="dollar__sign">$</sup>249
      </h1>
      <ul class="features__list">
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Up to <strong>45 stems</strong> professionally mixed &amp; mastered
        </li>
          <li><i class="fa fa-times" aria-hidden="true"></i></li> <!-- spacing -->
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
            <span>&#10003;</span> <strong>3 Free</strong> Revisions
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Vocal Tuning / Auto-Tune
        </li>
         <li>
          <i class="fa fa-times" aria-hidden="true"></i>
          <span>&#10003;</span> Track Mastering
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true"></i>
          <span>&#8853;</span> <strong>Simple &amp; Intuitive</strong> Revisions Management
        </li>
          <li><i class="fa fa-times" aria-hidden="true"></i></li>
      </ul>
      <button class="order__button">
      <a target="_blank" rel="noopener noreferrer" href="https://www.everythingbydor.com/services-products/premium-package">order now</a>
    </button>
  </div>
  
  <div class="pricing__table">
	  <p><i class="fa fa-times" aria-hidden="true"></i></p> <!-- top spacing -->
      <h3 class="heading"><strong>unlimited</strong></h3>
      <h1 class="service__price">
        <sup class="dollar__sign">$</sup>310
      </h1>
      <ul class="features__list">
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> <strong>All Your Stems</strong> professionally mixed &amp; mastered
        </li>
          <li><i class="fa fa-times" aria-hidden="true"></i></li> <!-- spacing -->
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> <strong>3 Free</strong> Revisions 
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true">
          </i>
          <span>&#10003;</span> Vocal Tuning / Auto-Tune
        </li>
        <li>
          <i class="fa fa-check" aria-hidden="true"></i>
          <span>&#10003;</span> Track Mastering
        </li>
         <li>
          <i class="fa fa-check" aria-hidden="true"></i>
          <span>&#8853;</span> <strong>Simple &amp; Intuitive</strong> Revisions Management
        </li>
          <li><i class="fa fa-times" aria-hidden="true"></i></li> <!-- spacing -->
      </ul>
      <button class="order__button">
      <a target="_blank" rel="noopener noreferrer" href="https://www.everythingbydor.com/services-products/unlimited-package">order now</a>
    </button>
  </div>
  
</div>
...