悬停时弹出引导卡

Question

例如，我有一个具有弹出数据切换功能的按钮：

<button type="button" class="btn btn-primary" data-toggle="popover" title="User Info">Popover with Title</button>

与此弹出框关联的 JS 代码：

$(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：

.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
}

但是，当我使用适当的 CSS 将鼠标悬停在卡片上时，它会在附带的引导卡片后面显示默认的弹出框背景。

我该如何解决这个问题？

Answer 1

看看这是否适合你：

$(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>

现场演示：https://jsfiddle.net/7fnqw418/

P.S：如果您想显示弹出框标题，可以注释掉 .popover-header 类

Answer 2

首先，将你的 css 类重命名为 .card。

.custom-card {
    width: 400px;
    border: none;
    border-radius: 10px;
    background-color: #fff
}

如果您只是想应用您的风格，请执行以下操作：

<div class="custom-card">

如果您想混合引导样式和您的样式，可以将多个类添加到单个 DOM 元素。 后面的类（或更具体的）中给出的规则会覆盖。

<div class="card custom-card">