Bild im Bootstrap-Popover läuft über Popover [Duplikat]

Question

Ich versuche, eine Seite mit Bildern in Popovers zu erstellen. Ich habe eine Online-Demo verwendet, um sie zu erstellen. Wenn das Bild jedoch größer als eine bestimmte Größe wird, läuft es aus dem Popover über. Wie behebe ich das?

Js Geige hier: https://jsfiddle.net/rdvL6kj9/10/

html:

  <div class="container my-4">
    <p class="font-weight-bold">This simple example shows how to place an image within a bootstrap popover. You can
      define if you want to launch the popover on hover or on click.</p>

    <p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/jquery/javascript/popovers/"
    target="_blank">Bootstrap Popovers Docs</a></strong></p>

    <a class="btn btn-primary" data-toggle="popover-hover" data-img="https://placekitten.com/500/300">Hover
      over me</a>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

js:

    // popovers initialization - on hover
    $('[data-toggle="popover-hover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return '<img src="' + $(this).data('img') + '" />'; }
    });

Hier ist ein Screenshot des Problems:

Answer 1

Du warst fast da. Ich habe class="img-fluid"dem imgTag eine integrierte Bootstrap-Klasse> hinzugefügt , damit es auf alle Bilder reagiert

   $('[data-toggle="popover-hover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return '<img src="' + $(this).data('img') + '"  class="img-fluid"/>'; }
    });

Hier ist die Arbeits Geige

Answer 2

Für alle, die in Zukunft auf diese Frage stoßen, ist hier die Antwort: Wenn Sie mit dem Verkleinern des Bildes einverstanden sind, können Sie die Antwort von Sai Manoj verwenden, wenn Sie möchten, dass das Bild größer wird, obwohl Sie die Eigenschaft für die maximale Breite überschreiben müssen in der Popover-Klasse wie folgt:

.popover {
    max-width: none;
}