如何根据要求自定义 bootstrap 4 工具提示？答案

【问题标题】：How to customize bootstrap 4 tooltip as per requirment?如何根据要求自定义 bootstrap 4 工具提示？
【发布时间】：2020-10-31 05:12:17
【问题描述】：

我需要根据下面的屏幕截图自定义 bootstrap 4 工具提示：-

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container p-5">
  <a href="#" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

谢谢！

【问题讨论】：

你想换位置吗？或改变颜色？或添加链接？你到底想要什么？

标签： javascript jquery css bootstrap-4

【解决方案1】：

您必须添加：

data-html="true"

最终结果是：

<a href="#" data-html="true" data-toggle="tooltip" data-placement="top" title="<span>Minimum Trade Amount</span> <span>0.000000 BTC</span>">Trading Rules</a>

【讨论】：

【解决方案2】：

试试这个。

.tooltip-inner {max-width: 100% !important;}

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial- scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
   </head>
    <body>

    <div class="container p-5">
      <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp;<span>0.000000 BTC</span><br><span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp;<span>0.000000 BTC</span><br><span>Minimum Trade Amount</span>&nbsp;&nbsp;&nbsp; <span>0.000000 BTC</span>">Trading Rules</a>
    </div>

    <script>
    $(document).ready(function(){
      $('[data-toggle="tooltip"]').tooltip();   
    });
    </script>

    </body>
    </html>

【讨论】：

【解决方案3】：

要在工具提示中添加 html 标签，您必须添加

data-html="true"

在此之后自定义样式如下：

.tooltip-inner.my-tooltip{
  max-width: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container p-5">
  <a href="#" data-toggle="tooltip" data-html="true" data-placement="top" title="<span class='mr-4'>Minimum Trade Amount</span> <span>0.000000 BTC</span>"
  data-template='<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner my-tooltip"></div></div>'
  >Trading Rules</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();   
});
</script>

</body>
</html>

这里的data-template 是覆盖引导程序生成的默认模板，如他们的文档中所述。刚刚在工具提示中添加了一个类，以通过更具体来覆盖样式

【讨论】：