javascript - HTML弹出框修复

我有带有popover链接的表，像这样。



当鼠标悬停在上面时



有谁知道如何使弹出框不包含价格，实际上不输入下一列，但在同一列中
这是代码。

<div class="condition-title">
    <a data-toggle="popover" data-html="true"
       data-content="{{ $rate->description }}
         @include('components.book.popover_fees', ['fees'=> $fees])
         @include('components.book.popover_advance_payment', ['rate' => $rate, 'type' => 'activity'])">
                            {{$rate->name_frontend}}
        <i class="glyphicons glyphicons-question-sign"></i>
    </a>
</div>

最佳答案

添加data-placement="top"。查看文档：https://getbootstrap.com/docs/4.1/components/popovers/#four-directions

<a data-toggle="popover"
   data-placement="top"
   ...
>...</a>

$(function () {
  $('[data-toggle="popover"]').popover()
})

.condition-title {
  margin-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="condition-title">
  <a  data-toggle="popover"
      data-placement="top"
      data-html="true"
      data-content="content">
                           Click to reveal
   <i class="glyphicons glyphicons-question-sign">i</i>
                        </a>
                    </div>

关于javascript - HTML弹出框修复，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51416061/