How to use popover in text without using Href

0

Good afternoon, how do I put a popover in a text without using a <a href ... ? Is it possible?

My code:

<div class="row">
    <div role="main" class="col-md-6 col-md-push-3" align="center">
        <img width="120" height="120" src='img/trab_suporte.png'/></br></br>
        <h5><center><a href="#" title="Responsável por atender os clientes, identificar, corrigir e reportar erros nos sistemas." rel="tooltip"><img src="img/info.png" width="20px" height="20px"/> Suporte Técnico</a> - <b>1</b></center></h5>
    </div>
</div>
    
asked by anonymous 20.11.2018 / 18:07

1 answer

1

From what looks, you are using Bootstrap, you are going to give a solution in Bootstrap. In it, there is the Popover component, you can read its definition better here .

Below is a code of how you can use it in another element, in this case a simple <span> , without having to use <a href ... :

$(function () {
  $('[data-toggle="popover"]').popover()
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<span data-container="body" data-toggle="popover" data-placement="bottom" data-content="Aqui vai o contéudo que deseja aparecer.">
   Clique Aqui
</span>
    
20.11.2018 / 18:36