JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis sit cumque quibusdam, voluptatem labore commodi nulla autem. Cumque aperiam, dolorum, cupiditate dolorem nobis inventore laborum voluptates, excepturi facilis iusto temporibus!
  <h4><b>Criação de Sites e Softwares <span id="Responsivo">responsivos</span>:</b></h4>
</div>

<div id="div-popover" class="hide">
  Dizer que um site ou um software é repsonsivo, indica que ele pode ser utilizado em computadores, tablets, tvs e celulares smartphones. o conteúdo do seu site, se ajusta de acordo com a tela do disposivo.
  <br />
  <br />
  <button id="close" class="btn btn-primary">Entendi</button>
</div>

JavaScript

$(document).ready(function() {

  $('#Responsivo').popover({
    //trigger: 'manual',
    placement: 'bottom',
    html: true,
    title: 'O que é um site ou software responsivo?',
    content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
  }).popover('show');

  $(document).on('click', 'button#close', function() {
    $('#Responsivo').popover('hide');
  });

});