0

me pudieran ayudar:

Estoy tratando de colocar el siguiente código de colores tal como se muestra a continuación:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<h4>Codigo de colores</h4><br>
  <div class="row" style="display:inline;">
    <div class="col-sm-2 bg-info" style="width:20px; display:inline;">x</div>
    <div class="col-sm-2" style="display:inline;">1 a 5</div>
  </div><br>
  <div class="row" style="display:inline;">
    <div class="col-sm-2 bg-warning" style="width:20px; display:inline;">x</div>
    <div class="col-sm-2" style="display:inline;">6 a 8</div>
  </div><br>
  <div class="row" style="display:inline;">
    <div class="col-sm-2 bg-danger" style="width:20px; display:inline;">x</div>
    <div class="col-sm-2" style="display:inline;">9 a 10</div>
  </div>
</div>

y quiero mostrarlo dentro de un popover de Bootstrap pero no me sale porque me toma el código anterior como texto. a continuación muestro el popover donde quiero colocar el código de colores:

$(function (){
  $('[data-toggle="popover"]').popover()
  
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Codigo de Colores" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

<script src="https://unpkg.com/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>

1 respuesta 1

1

Primero que nada, no mezcles diferentes versiones de Bootstrap, talvez no lo haces en tu código, pero si en tu ejemplo. Mezclar Bootstrap 5 con Bootstrap 4 puede traer muchos problemas.

Tu código quedaría así:

$(function (){
  $('[data-toggle="popover"]').popover()
  
})
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<a tabindex="0"
class="btn btn-lg btn-danger"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Codigo de Colores"
data-html="true"
data-content="<div class='container'>
  <div class='row' style='display:inline;'>
    <div class='col-sm-2 bg-info' style='width:20px; display:inline;'>x</div>
    <div class='col-sm-2' style='display:inline;'>1 a 5</div>
  </div><br>
  <div class='row' style='display:inline;'>
    <div class='col-sm-2 bg-warning' style='width:20px; display:inline;'>x</div>
    <div class='col-sm-2' style='display:inline;'>6 a 8</div>
  </div><br>
  <div class='row' style='display:inline;'>
    <div class='col-sm-2 bg-danger' style='width:20px; display:inline;'>x</div>
    <div class='col-sm-2' style='display:inline;'>9 a 10</div>
  </div>
</div>">Dismissible popover</a>

Solo debías agregar el data-html="true" y agregar tu código HTML (Claro, cambiando las comillas por las comillas simples y así evitar un error de syntaxis).

Si quieres, podrías agregar igual HTML al tittle: title="<b>Codigos de Colores</b>"

Espero sea lo que busques, saludos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.