Иногда пользовательский опыт (UX) вашего веб-сайта нуждается в подталкивании — немного больше информации, если пользователь не знает, куда идти дальше. Всплывающие подсказки позволяют вам добавить немного больше информации, чтобы помочь посетителям вашего сайта сориентироваться в пользовательском опыте.

Ниже приведены необходимые HTML, CSS и JavaScript.

Шаг 1

Добавьте приведенный ниже HTML-код на свой веб-сайт и соответствующим образом измените размещение и содержание всплывающей подсказки.

<div class="container">
   <div class="jumbotron">
      <h1>Using Tooltips</h1>
      <p>  Hover over the features underneath each plan to see tooltips that give you more information about the feature..</p>
   </div>
</div>
<section class="pricing-boxes">
   <div class="container">
      <div class="boxes-container">
         <div class="row">
            <div class="col-md-4">
               <div class="pricing-item pricing-item1">
                  <div class="pricing-box">
                     <div class="outside-content top-content">
                        <h2>
                           Basic
                        </h2>
                        <p class="price">
                           <sup>$</sup>99<span>/MO</span>
                        </p>
                        <p>
                           <span class="box-server">Starting at</span>
                        </p>
                     </div>
                     <div class="inside-content">
                        <p>
                        </p>
                        <p class="buy-btn">
                           <a class="btn" onclick="ga('send', 'event', 'Pricing Page', 'try now click', 'try now button pricing page'); redirectTOPrice('small');">Try Now</a>
                        </p>
                     </div>
                     <div class="outside-content">
                        <ul>
                           <li>
                              <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                                 Hosting & CRM Included
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                                 10 GB Storage
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                                 2 GB Memory
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                                 Email & Chat Support
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               <div class="pricing-item pricing-item1">
                  <div class="pricing-box">
                     <div class="outside-content top-content">
                        <h2>
                           Team
                        </h2>
                        <p class="price">
                           <sup>$</sup>249<span>/MO</span>
                        </p>
                        <p>
                           <span class="box-server">Starting at</span>
                        </p>
                     </div>
                     <div class="inside-content">
                        <p>
                        </p>
                        <p class="buy-btn">
                           <a class="btn" onclick="ga('send', 'event', 'Pricing Page', 'buy now click', 'buy now medium button pricing page'); redirectTOPrice('medium');">Buy Now</a>
                        </p>
                     </div>
                     <div class="outside-content">
                        <ul>
                           <li>
                              <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                                 Hosting & CRM Included
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Cloud storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                                 50 GB Storage
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                                 4 GB Memory
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                                 Email & Chat Support
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes automated daily backups of your server instance(s) for increased security." style="cursor: help; width:inherit;">
                                 Daily Backups
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes a dedicated IP (Internet Protocol), a unique Internet address dedicated exclusively to your hosting account. This is in contrast to the normal configuration of several hosting accounts residing on a single server and sharing its IP address." style="cursor: help; width:inherit;">
                                 Dedicated IP
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               <div class="pricing-item pricing-item2">
                  <div class="pricing-box pricing-boxes2">
                     <div class="outside-content top-content">
                        <h2>
                           Enterprise
                        </h2>
                        <p class="price">
                           <sup>$</sup>1,499<span>/MO</span>
                        </p>
                        <p>
                           <span class="box-server">Starting at</span>
                        </p>
                     </div>
                     <div class="inside-content">
                        <p>
                        </p>
                        <p class="buy-btn">
                           <a class="btn btn-white" onclick="ga('send', 'event', 'Pricing Page', 'buy now click', 'buy now large button pricing page'); redirectTOPrice('large');">buy now</a>
                        </p>
                     </div>
                     <div class="outside-content">
                        <ul>
                           <li>
                              <div class="qtip-div" help-data="Includes a flexible, highly scalable way to manage your contacts, leads, and opportunities." style="cursor: help; width:inherit;">
                                 Hosting & CRM Included
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Distributes incoming traffic across multiple EC2 instances, in multiple Availability Zones. This increases the fault tolerance of your applications." style="cursor: help; width:inherit;">
                                 Load Balancer
                              </div>
                           </li>
                           <!--<li> <div class="qtip-div" help-data="Includes 3 T2 Large Server Instances that provide a baseline level of CPU performance with the ability to burst above the baseline." style="cursor: help; width:inherit;">3 Small Web Servers</div></li>
                              <li> <div class="qtip-div" help-data="Cloud storage is a simple and scalable way to store, access, and share data over the Internet. " style="cursor: help; width:inherit;">100 GB Storage</div></li>
                              <li> <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">6 GB Memory</div></li>-->
                           <li>
                              <div class="qtip-div" help-data="Includes 3 T2 Large Server Instances that provide a baseline level of CPU performance with the ability to burst above the baseline." style="cursor: help; width:inherit;">
                                 3 Large Web Servers
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Cloud storage is a simple and scalable way to store, access, and share data over the Internet." style="cursor: help; width:inherit;">
                                 50 GB Storage
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Additional memory allows more programs to run at one time and allows processes to run faster with more room to work with." style="cursor: help; width:inherit;">
                                 8 GB Memory
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes support via email and chat from our team of Technical Account Managers." style="cursor: help; width:inherit;">
                                 Email & Chat Support
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes phone support with a member of our technical support staff." style="cursor: help; width:inherit;">
                                 Phone Support
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes training customized to the needs of your business." style="cursor: help; width:inherit;">
                                 1 Training Seat
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes annual performance and security assessments to keep you and your customers up and running at the highest levels of efficiency." style="cursor: help; width:inherit;">
                                 Annual Reviews
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes automated daily backups of your server instance(s) for increased security." style="cursor: help; width:inherit;">
                                 Daily Backups
                              </div>
                           </li>
                           <li>
                              <div class="qtip-div" help-data="Includes a dedicated IP (Internet Protocol), a unique Internet address dedicated exclusively to your hosting account. This is in contrast to the normal configuration of several hosting accounts residing on a single server and sharing its IP address." style="cursor: help; width:inherit;">
                                 Dedicated IP
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
</div>
</section>
</div>

Шаг 2

Добавьте приведенный ниже CSS в таблицу стилей вашего веб-сайта.

.pricing-plans-wrapper .pricing-plans-heading {
  margin-top: 40px;
}
.pricing-plans-wrapper .pricing-plans-heading {
  color: #000;
  text-align: left;
  margin-top: 20px;
}
.well {
  margin-top 25px;
}
.pricing-plans-wrapper .pricing-plans-heading h1 {
  text-align: left;
  margin-top: 0;
  font-size: 50px;
  padding-left: 48px;
}
.pricing-plans-wrapper h1 {
  font-size: 60px;
  color: #323b40;
  text-align: left;
  margin-bottom: 0;
}
.top-content h2,p {
  text-align: left;
}
.pricing-item1 p a {
    background-color: #0489b7;
    color: #fff;
}
.pricing-item p a {
    padding: 12px 50px !important;
}
.pricing-item .pricing-box .btn {
    padding: 12px 106px !important;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
}
.pricing-item .pricing-box.pricing-boxes2 .btn {
    color: #2e9bc1;
}
.pricing-item .pricing-box.pricing-boxes2 .btn {
    color: rgb(66, 16, 88);
    /* color: #7832ac; */
}
.btn.btn-white {
    background-color: #fff;
    color: #434343;
}
.inside-content p {
  text-align: left;
  padding: 0 40px;
}
.pricing-wrapper section.pricing-boxes {
  margin-bottom: 80px;
}
.pricing-wrapper section.pricing-boxes {
  margin: 20px 0 40px;
}
.pricing-wrapper section.pricing-boxes .pricing-item {
  background-color: #efefef;
}
.pricing-wrapper section.pricing-boxes .pricing-item {
  background-color: #f5f5f5;
  font-size: 20px;
}
.pricing-item .pricing-box {
  padding: 10px 0 40px;
}
.outside-content.top-content {
  -webkit-user-select: auto;
  padding-bottom: 1em;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 8px 8px;
}
.pricing-wrapper section.pricing-boxes .pricing-item h2 {
  font-size: 31px;
  letter-spacing: 0;
  font-weight: 400;
  padding-top: 20px;
  color: #323b40;
  text-align: left;
}
.pricing-wrapper section.pricing-boxes .pricing-item h2 {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 33px;
}
.pricing-wrapper section.pricing-boxes .pricing-item.pricing-item1 p.price,
.pricing-wrapper section.pricing-boxes .pricing-item.pricing-item1 p.price span,
.pricing-wrapper section.pricing-boxes .pricing-item.pricing-item1 p,
.pricing-wrapper section.pricing-boxes .pricing-item.pricing-item1 .box-server,
.pricing-wrapper section.pricing-boxes .pricing-item.pricing-item1 ul li {
  color: #323b40;
}
.pricing-wrapper section.pricing-boxes .pricing-item p.price {
  font-weight: 200;
  line-height: 22px;
  margin: 30px 0 10px;
}
.pricing-wrapper section.pricing-boxes .pricing-item p,
.pricing-wrapper section.pricing-boxes .pricing-item p.price,
.pricing-plans-wrapper .boxes-container .plans-boxes p.price {
  text-align: left;
}
.pricing-wrapper section.pricing-boxes {
  margin-bottom: 80px;
}
.pricing-wrapper section.pricing-boxes {
  margin: 20px 0 40px;
}
.pricing-wrapper section.pricing-boxes .pricing-item {
  background-color: #efefef;
}
.pricing-wrapper section.pricing-boxes .pricing-item {
  background-color: #f5f5f5;
  font-size: 20px;
}
.pricing-item .pricing-box {
  padding: 10px 0 40px;
}
.outside-content.top-content {
  -webkit-user-select: auto;
  padding-bottom: 1em;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 8px 8px;
}
.outside-content {
  padding: 0 40px;
}
.pricing-wrapper section.pricing-boxes .pricing-item h2 {
  font-size: 31px;
  letter-spacing: 0;
  font-weight: 400;
  padding-top: 20px;
  color: #323b40;
  text-align: left;
}
.pricing-wrapper section.pricing-boxes .pricing-item h2 {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: 33px;
}
.pricing-item .pricing-box.pricing-boxes2 .btn {
    color: #2e9bc1;
}
.pricing-wrapper .inside-content {
    background-color: #f5f5f5;
    padding: 20px 40px;
}
.pricing-wrapper section.pricing-boxes .pricing-item1 p a {
    background-color: #0489b7;
    color: #fff;
}
.pricing-item.pricing-item2 .pricing-box.pricing-boxes2 {
    background-color: #eeeeee;
}
.pricing-wrapper .inside-content {
    background-color: #f5f5f5;
    padding: 20px 40px;
}
.pricing-item .pricing-box.pricing-boxes2 .btn {
    color: #2e9bc1;
}
.qtip-div {
    margin-bottom: -4px;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-position: 0% 100%;
    background-repeat: no-repeat;
}

Шаг 3

Добавьте приведенный ниже код JavaScript на свою веб-страницу, чтобы инициализировать плагин Tooltip.

$(document).ready(function() {
    $('.qtip-div[help-data]').qtip({ 
       content: {
        attr: 'help-data' // Tell qTip2 to look inside this attr for its content
       },      
        position: {
            my: 'center left',  // Position my top left...
            at: 'center right', // at the bottom right of...           
        },
        style: { 
          classes: 'qtip-tipsy myCustomClass'// Inherit from preset style        
       }
    });
  });

Шаг 4

Добавьте приведенные ниже элементы в заголовок своей веб-страницы, чтобы инициализировать Bootstrap и jQuery.

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css">

Демо на JSFiddle

Скачать с Гитхаба

Первоначально опубликовано здесь, в блоге Solodev Web Design

Получайте ежедневные учебные пособия по веб-дизайну на свой почтовый ящик, подписавшись на блог Solodev на странице solodev.com/blog/!

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.