Tooltips

Tooltips

by Solodev CMS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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">
 <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>
                                                ...

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:...

JavaScript

$(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        
       }
    });
  });