Popover Bootstrap Card on Hover - css

Question

I have a Button for example that has the popover data toggle:
<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>
The JS code that is associated with this popover:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover',
html : true,
content : '<div class="container mt-5 d-flex justify-content-center"> <div class="card p-3"> <div class="d-flex align-items-center"> <div class="image"> <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="rounded" width="155"> </div><div class="ml-3 w-100"> <h4 class="mb-0 mt-0">Alex Morrision</h4> <span>Senior Journalist</span> <div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats"> <div class="d-flex flex-column"> <span class="articles">Articles</span> <span class="number1">38</span> </div><div class="d-flex flex-column"> <span class="followers">Followers</span> <span class="number2">980</span> </div><div class="d-flex flex-column"> <span class="rating">Rating</span> <span class="number3">8.9</span> </div></div><div class="button mt-2 d-flex flex-row align-items-center"> <button class="btn btn-sm btn-outline-primary w-100">Chat</button> <button class="btn btn-sm btn-primary w-100 ml-2">Follow</button> </div></div></div></div></div>'
});
});
CSS for the popover Bootstrap card:
.card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
.stats {
background: #f2f5f8 !important;
color: #000 !important
}
.articles {
font-size: 10px;
color: #a1aab9
}
.number1 {
font-weight: 500
}
.followers {
font-size: 10px;
color: #a1aab9
}
.number2 {
font-weight: 500
}
.rating {
font-size: 10px;
color: #a1aab9
}
.number3 {
font-weight: 500
}
However, when I hover over the card, with the appropriate CSS, it will show the default popover background behind the bootstrap card that is with it.
How do I solve this?

Answer 1

See if this works for you:
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
placement: 'top',
trigger: 'hover',
html: true,
content: '<div class="card p-3"> <div class="d-flex align-items-center"> <div class="image"> <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" class="rounded" width="155"> </div><div class="ml-3 w-100"> <h4 class="mb-0 mt-0">Alex Morrision</h4> <span>Senior Journalist</span> <div class="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats"> <div class="d-flex flex-column"> <span class="articles">Articles</span> <span class="number1">38</span> </div><div class="d-flex flex-column"> <span class="followers">Followers</span> <span class="number2">980</span> </div><div class="d-flex flex-column"> <span class="rating">Rating</span> <span class="number3">8.9</span> </div></div><div class="button mt-2 d-flex flex-row align-items-center"> <button class="btn btn-sm btn-outline-primary w-100">Chat</button> <button class="btn btn-sm btn-primary w-100 ml-2">Follow</button> </div></div></div></div>'
});
});
.popover-title { display: none !important; }
.popover {
max-width: 500px !important;
}
.popover-header{
display: none !important;
}
.popover-body {
padding: 0px !important;
}
.card{
border: none !important;
}
.card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
.stats {
background: #f2f5f8 !important;
color: #000 !important
}
.articles {
font-size: 10px;
color: #a1aab9
}
.number1 {
font-weight: 500
}
.followers {
font-size: 10px;
color: #a1aab9
}
.number2 {
font-weight: 500
}
.rating {
font-size: 10px;
color: #a1aab9
}
.number3 {
font-weight: 500
}
<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">
<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>
<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>
Live Demo: https://jsfiddle.net/7fnqw418/
P.S: You can comment out the .popover-header class if you wish to display the popover header

Answer 2

First, rename your css class .card.
.custom-card {
width: 400px;
border: none;
border-radius: 10px;
background-color: #fff
}
If you just want to apply your style do this :
<div class="custom-card">
If you want to mix bootstrap style and yours, you can add multiple classes to a single DOM element.
Rules given in later classes (or which are more specific) override.
<div class="card custom-card">