Popover bootstrap button in jquery does not show content

Question

Good morning guys, I’m trying to understand how the bootstrap Popover works, I’m trying to use in button form to understand how it works but this is a secret for me. Although following tutorials, or documentation indications from the bootstrap page on the subject, including CTRL C... does not work, wanted a help on how to solve my doubt and achieve what I am trying to perform, please.

Below the code

<!-->  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="js/owl.carousel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
    <link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet'>  
    
==========:::::: CONTEÙDO DO TOPO DA PÀGINA ::::::========    
<-->


<footer>
        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <h1 class="display-4">Plug seu celular na moda</h1>
            <p>Atendimento das 10:00 às 22:10 de Segunda-feira à Sábado!
            <p>
            <table style="width:100%">
                <th>Politicas</th>
                <th>Serviços</th>
                <th>
                <script type="text/javascript">
                  $(function () {
                    $('[data-toggle="popover"]').popover()
                  })
                })
                </script>
                <button type="button" class="btn btn-secondary" data-container="container" data-toggle="popover" title="Informações" data-content="Lorem Ipsum" data-placement="top">Informações</button>
                </th>
              <tr>
                <td>Formas de Pagamento</td>
                <td>Prazo de Troca</td>
                <td>Troca de Películas</td>
              </tr>
              <tr>
                <td>Descontos</td>
                <td>Políticas de Troca</td>
                <td>Manutenção</td>
              </tr>
              <tr>
                <td>Sorteios</td>
                <td>Regulamento de Trocas</td>
                <td>Encomendas</td>
              </tr>
              <tr>
                <td>Fornecedores</td>
                <td>Reembolso</td>
                <td>Atendimento ao Cliente</td>
              </tr>
            </table>    
          </div>
        </div>
        <div class="alert alert-dark" role="alert" id="copyright">
          <p>2018 Copyright © Website desenvolvido por Públio Elon.</p>
        </div>
      </footer>

Answer 1

for the use of Popovers

1- Popover is a third party library, you need to make the call of that file before the file of JS bootstrap As follows :

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  

2- Initiation of the Popover so when the document is initialized, just select your data-toggle and call the function as follows: $(document).ready(function(){ $('[data-toggle="popover"]').popover()}) In this way, all elements with this attribute will be automatically recognized.

3- The import of Jquery before closing the tag body page for the elements to work.

Below contains an example of how it works.

$(document).ready(function(){
  $('[data-toggle="popover"]').popover()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Título do Popover" data-content="Exemplo de Popover em ação!">Clique!</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>