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"></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"></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-->