How to use text Popover without using Href

Asked

Viewed 42 times

0

Good afternoon, as I put one popover in a text without using a <a href ... ? It is 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>
javascript popover

  • Have you tried using title in another element? What happened?

  • You mean, in a clickable element?

  • Are you using a plugin for this or is it just the title html default?

  • 1 - The magic is in rel, the title only does not solve; 2 - An element without link in the case; 3 - I am using some standard imports for this component Solved as follows: <data-container="body" data-toggle="Popover" data-placement="bottom" data-content="Here is the content you want to appear." ><img src="img/info.png" width="20px" height="20px"/></span>Development</a> - <b>? </b>

1 answer

1


By the looks of it, you are using Bootstrap, are going to give a solution in Bootstrap. In it, there is the component Popover, that you can read your definition better here.

Below is a code of how you can use in another element, in the 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>

  • It worked perfectly, I put an image in the middle and stayed as I wanted, thank you very much!

Browser other questions tagged javascript popover

You are not signed in. Login or sign up in order to post.