Tooltip when disabled?

Question

Tooltip when disabled?

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I want to make a tooltip appear when the button is off link saying that you need to mark the terms box, once you mark it the tooltip disappears. Can someone help me ? Thank you

    <!--Loja | INICIO-->
    <section class="container"> 
        <div class="presentation"> 
            <h3> loja <span class="hide-on-mobile">Adquira privilégios em nossos servidores</span> </h3> 
        </div> 
        <div class="content"> 
            <div class="row"> 



                <div class="col-md-9"> 
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Servidor: <?php echo $serv_nome_01 ?></h4>

    <input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /> Confirmo que li e aceitei todos os 

     <a href="/termos" target="_blank" class="has-tooltip" id="link">
      <span class="tooltip">
        <span><i style="font-size: 14px; color: yellow;" class="material-icons">&#xe001;</i> Leia os Termos e Condições. </span>
      </span>
      Termos e Condições.
    </a>
    <br><br>

                        </div>



                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_01 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_01 ?> - <?php echo $vip_dias_01 ?></div> 
                                <div class="price"><?php echo $vip_preco_01 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_01 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_02 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_02 ?> - <?php echo $vip_dias_02 ?></div> 
                                <div class="price"><?php echo $vip_preco_02 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_02 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_03 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_03 ?> - <?php echo $vip_dias_03 ?></div> 
                                <div class="price"><?php echo $vip_preco_03 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_03 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_04 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_04 ?> - <?php echo $vip_dias_04 ?></div> 
                                <div class="price"><?php echo $vip_preco_04 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_04 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_05 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_05 ?> - <?php echo $vip_dias_05 ?></div> 
                                <div class="price"><?php echo $vip_preco_05 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_05 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_06 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_06 ?> - <?php echo $vip_dias_06 ?></div> 
                                <div class="price"><?php echo $vip_preco_06 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_06 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_07 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_07 ?> - <?php echo $vip_dias_07 ?></div> 
                                <div class="price"><?php echo $vip_preco_06 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_07 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_08 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_08 ?> - <?php echo $vip_dias_08 ?></div> 
                                <div class="price"><?php echo $vip_preco_08 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_08 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_09 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_09 ?> - <?php echo $vip_dias_09 ?></div> 
                                <div class="price"><?php echo $vip_preco_09 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_09 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_10 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_10 ?> - <?php echo $vip_dias_10 ?></div> 
                                <div class="price"><?php echo $vip_preco_10 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_10 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_11 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_11 ?> - <?php echo $vip_dias_11 ?></div> 
                                <div class="price"><?php echo $vip_preco_11 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_11 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>

                        <div class="col-md-4"> 
                            <div class="product"> 
                                <div class="image"> 
                                    <img src="<?php echo $vip_img_12 ?>" alt="<?php echo $nome_serv ?>" class="img-fluid"> 
                                </div> 
                                <div class="name"><?php echo $vip_nome_12 ?> - <?php echo $vip_dias_12 ?></div> 
                                <div class="price"><?php echo $vip_preco_12 ?></div> 
                                <div class="footer"> 
                                    <a href="<?php echo $vip_detalhes_12 ?>" target="_blank">
                                    <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
                                    </a>
                                </div> 
                            </div> 
                        </div>


                            </div> 
                        </div> 
                    </div> 
                </div>
    </section>
    <!--Loja | FIM-->



    <script type="text/javascript">
    function confere() {
       $('.ck_incluir').prop("disabled", !document.getElementById('ck_permissao').checked);
       alert("Você está concordando com todos os Termos e Condições. \n \n    Deseja Continuar ??");
    }
    </script>

Another Doubt !!

I have this other page here and also wanted to do the same thing

• Place same as that other question . (Put disabled if the checkbox is not checked)

• And make Tooltip appear if checkbox is not checked

<!--Loja | INICIO-->
<section class="container"> 
    <div class="presentation"> 
        <h3> loja <span class="hide-on-mobile">Adquira privilégios em nossos servidores</span> </h3> 
    </div> 
    <div class="content"> 
        <div class="row"> 



            <div class="col-md-9"> 
                <div class="row">
                    <div class="col-md-12">
                        <h4>Servidor: <?php echo $serv_nome_01 ?></h4>

<input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /> Confirmo que li e aceitei todos os 

 <a href="/termos" target="_blank" class="has-tooltip" id="link">
  <span class="tooltip">
    <span><i style="font-size: 14px; color: yellow;" class="material-icons">&#xe001;</i> Leia os Termos e Condições. </span>
  </span>
  Termos e Condições.
</a>
<br><br>
                    </div>

<section class="container">
 <div class="content"> 
    <div class="carrinho"> 
        <form action="finalizar.php" method="post" class="form-horizontal">
            <div class="body"> 
                <div class="row">

                    <div class="col-md-8"> 
                        <h3>Comprar Pontos</h3> 
                        <hr> 
                        <div class="row"> 
                            <div class="col-md-6"> 
                                <div class="form-group"> 
                                    <label>Pontos</label> 
                                    <input required="required" onpropertychange="TextChange(this)" onkeyup="JavaScript: TextChange()" onmouseup="JavaScript: TextChange()" type="number" id="idquantidade" name="quantidade" value="5" max="1000000" class="ck_incluir form-control"> 
                                </div> 
                            </div> 
                        </div> 
                        <div class="form-group"> 
                            <label>Deseja pagar como?</label> 
                            <div class="row gateways">
                                <div class="col-md-4"> 
                                    <label> 
                                        <input type="radio" name="paypal" id="idpaypal" required> 
                                        <img src="https://i.imgur.com/lqXhSSM.png"class="img-fluid"> 
                                    </label> 
                                </div> 
                                <div class="col-md-4"> 
                                    <label> 
                                        <input type="radio" name="mercadopago" id="idmercadopago" required="required" required> 
                                        <img src="https://i.imgur.com/DT3iO4x.png"class="img-fluid"> 
                                    </label> 
                                </div>
                            </div> 
                        </div> 
                    </div> 
                    <div class="col-md-4"> 
                        <h3>Pagar</h3> 
                        <hr> 
                        <p>Valor Total: 
                            <label class="control-label">R$ <span class="ck_incluir" disabled="disabled" id="valortotal">5,00</span></label>
                        </p> 
                        <br><br> 
                        <button type="submit" name="comprar" value="true" disabled="disabled" class="ck_incluir btn-checkout comprar" role="button" target="_blank" class="ck_incluir btn-checkout" value="FINALIZAR">FINALIZAR</button> 
                    </div>

                </div> 
            </div>
        </form>
    </div> 
 </div> 
</section>

                        </div> 
                    </div> 
                </div> 
            </div>
</section>
<!--Loja | FIM-->

javascript html html5 json

asked by anonymous 04.02.2018 / 04:03

2 answers

1

Here is a function that can help you:

Script (Javascript, without jQuery):

        var button = document.getElementById("teste");
          var checkbox = document.getElementById("termos");
          var div = document.getElementById("logger");

        function Verificar(){

          if(button.disabled == true && checkbox.checked == true){
            button.disabled = false;
            div.innerHTML = "Obrigado!";
          }else{
            button.disabled = true;
            div.innerHTML = "Aceite os termos para liberar o botão!";
          }
        }

        Verificar();

HTML:

        <button id="teste" disabled>Teste</button><br />

        <input type="checkbox" id="termos" onclick="Verificar()"/>  <span id="logger"></span>

04.02.2018 / 04:29

Instantiating the database context in the controller Comparison of values in list of tuples in python 3.x

score 2 · Accepted Answer

You can create a tooltip by adding the element .after() of jQuery an element after the buttons that will be positioned above it.

First you need to define the tooltip styles in the CSS. You need to add the following code in your CSS:

._tooltip{
   position: absolute;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   padding: 0 6px;
   background-color: rgba(0, 0, 0, .7);
   color: #fff;
   font-size: .8em;
   top: -40px;
   left: 50%;
   white-space: nowrap;
   border-radius: 3px;
   z-index: 999;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

._tooltip::after{
   content: '';
   border-left: 6px solid;
   border-right: 6px solid;
   border-top: 6px solid #000;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -3px;
   opacity: .7;
   filter: alpha(opacity=70);
}

Then the JS code (including changes to the confere() function):

function confere(){
   var checado = !document.getElementById('ck_permissao').checked;
   $('.ck_incluir').prop("disabled", checado);
   $("input.ck_incluir")
   .closest(".footer")
   .find("._tooltip")
   .css('display', checado ? 'inline-block' : 'none');
}

$(function(){
   var tooltip_text = 'Leia os Termos e Condições.';
   var tooltip = '<span class="_tooltip">'+tooltip_text+'</span>';
   $("input.ck_incluir")
   .closest("a")
   .eq(0)
   .after(tooltip)
   .parent()
   .css("position","relative");
   // se quiser que apareça em todos os botões
   // basta excluir o .eq(0)
});

See it working:

function confere(){
   var checado = !document.getElementById('ck_permissao').checked;
   $('.ck_incluir').prop("disabled", checado);
   $("input.ck_incluir")
   .closest(".footer")
   .find("._tooltip")
   .css('display', checado ? 'inline-block' : 'none');
}

$(function(){
   var tooltip_text = 'Leia os Termos e Condições.';
   var tooltip = '<span class="_tooltip">'+tooltip_text+'</span>';
   $("input.ck_incluir").closest("a").eq(0)
   .after(tooltip)
   .parent()
   .css("position","relative");
   // se quiser que apareça em todos os botões
   // basta excluir o .eq(0)
});

._tooltip{
   position: absolute;
   display: inline-block;
   height: 30px;
   line-height: 30px;
   padding: 0 6px;
   background-color: rgba(0, 0, 0, .7);
   color: #fff;
   font-size: .8em;
   top: -40px;
   left: 50%;
   white-space: nowrap;
   border-radius: 3px;
   z-index: 999;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

._tooltip::after{
   content: '';
   border-left: 6px solid;
   border-right: 6px solid;
   border-top: 6px solid #000;
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -3px;
   opacity: .7;
   filter: alpha(opacity=70);
}

/* A LINHA ABAIXO É SÓ PARA EXEMPLO. NÃO USE*/
.ck_incluir{
   width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<input name="ck_permissao"  type="checkbox" id="ck_permissao" value="checkbox" onclick="return confere()" /><a>TERMOS DE USO</a>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_01 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_01 ?> - <?php echo $vip_dias_01 ?></div> 
         <div class="price"><?php echo $vip_preco_01 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_01 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_02 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_02 ?> - <?php echo $vip_dias_02 ?></div> 
         <div class="price"><?php echo $vip_preco_02 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_02 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_03 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_03 ?> - <?php echo $vip_dias_03 ?></div> 
         <div class="price"><?php echo $vip_preco_03 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_03 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_04 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_04 ?> - <?php echo $vip_dias_04 ?></div> 
         <div class="price"><?php echo $vip_preco_04 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_04 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_05 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_05 ?> - <?php echo $vip_dias_05 ?></div> 
         <div class="price"><?php echo $vip_preco_05 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_05 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_06 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_06 ?> - <?php echo $vip_dias_06 ?></div> 
         <div class="price"><?php echo $vip_preco_06 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_06 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_07 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_07 ?> - <?php echo $vip_dias_07 ?></div> 
         <div class="price"><?php echo $vip_preco_06 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_07 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_08 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_08 ?> - <?php echo $vip_dias_08 ?></div> 
         <div class="price"><?php echo $vip_preco_08 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_08 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_09 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_09 ?> - <?php echo $vip_dias_09 ?></div> 
         <div class="price"><?php echo $vip_preco_09 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_09 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_10 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_10 ?> - <?php echo $vip_dias_10 ?></div> 
         <div class="price"><?php echo $vip_preco_10 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_10 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_11 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_11 ?> - <?php echo $vip_dias_11 ?></div> 
         <div class="price"><?php echo $vip_preco_11 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_11 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_12 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_12 ?> - <?php echo $vip_dias_12 ?></div> 
         <div class="price"><?php echo $vip_preco_12 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_12 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_13 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_13 ?> - <?php echo $vip_dias_13 ?></div> 
         <div class="price"><?php echo $vip_preco_13 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_13 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_14 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_14 ?> - <?php echo $vip_dias_14 ?></div> 
         <div class="price"><?php echo $vip_preco_14 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_14 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_15 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_15 ?> - <?php echo $vip_dias_15 ?></div> 
         <div class="price"><?php echo $vip_preco_15 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_15 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>

 <div class="col-md-4"> 
     <div class="product"> 
         <div class="image"> 
             <img src="<?php echo $vip_img_16 ?>" alt="WorldNetwork" class="img-fluid"> 
         </div> 
         <div class="name"><?php echo $vip_nome_16 ?> - <?php echo $vip_dias_16 ?></div> 
         <div class="price"><?php echo $vip_preco_16 ?></div> 
         <div class="footer"> 
             <a href="<?php echo $vip_detalhes_16 ?>" target="_blank">
             <input disabled="disabled" type="button" class="ck_incluir" value="COMPRAR"/>
             </a>
         </div> 
     </div> 
 </div>