Question

尝试在tooltip box中建立自定义HTML表几个小时后，我意识到Bootstrap版本似乎可以解决此问题。确实，这在Boostrap 4.0.0下是完美的，但在Bootstrap 4.3.1下却没有。

这是一个错误吗？还是我错过了什么？

代码在这里：

/** Tooltip */
$(function() {
  $('.my_tooltip').tooltip({
    placement: "right",
    html: true,
    title: `Colors explanation:
    <table style="width:100%">
      <tr>
        <td>
          <div class='color-box bg-green'></div>
        </td>
        <td style='text-align:left;'>Green : available</td>
      </tr>
      <tr>
        <td>
          <div class='color-box bg-orange'></div>
        </td>
        <td style='text-align:left;'>Orange : pre-booked</td>
      </tr>
      <tr>
        <td>
          <div class='color-box bg-red'></div>
        </td>
        <td style='text-align:left;'>Red : booked</td>
      </tr>
    </table>
    `
  });
});


/* Load icons */
feather.replace();

.bg-green {
  background: green;
}

.bg-orange {
  background: orange;
}

.bg-red {
  background: red;
}

.color-box {
  width: 10px;
  height: 10px;
  margin: 10px;
}

<!-- Bootstrap -->
<link rel="stylesheet" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO">


<!------------------------------------------------------------->
<i data-feather="help-circle" class="my_tooltip"></i>


<!------------------------------------------------------------->

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>

<!-- Popper -->
<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>

<!-- NOT WORKING BOOTSTRAP VERSION -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- WORKING BOOTSTRAP VERSION -->
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->

Answer 1

Bootstrap 4.3.1为安全性添加了sanitize option，默认为true。只需将sanitize: false添加到您的选项中，您就可以重新营业。另请参见https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer：

/** Toolpit */
$(function() {
  $('.my_toolpit').tooltip({
    placement: "right",
    html: true,
    sanitize: false,
    title: `Colors explanation:
    <table style="width:100%">
      <tr>
        <td>
          <div class='color-box bg-green'></div>
        </td>
        <td style='text-align:left;'>Green : available</td>
      </tr>
      <tr>
        <td>
          <div class='color-box bg-orange'></div>
        </td>
        <td style='text-align:left;'>Orange : pre-booked</td>
      </tr>
      <tr>
        <td>
          <div class='color-box bg-red'></div>
        </td>
        <td style='text-align:left;'>Red : booked</td>
      </tr>
    </table>
    `
  });
});


/* Load icons */
feather.replace();

.bg-green {
  background: green;
}

.bg-orange {
  background: orange;
}

.bg-red {
  background: red;
}

.color-box {
  width: 10px;
  height: 10px;
  margin: 10px;
}

<!-- Bootstrap -->
<link rel="stylesheet" crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO">


<!------------------------------------------------------------->
<i data-feather="help-circle" class="my_toolpit"></i>


<!------------------------------------------------------------->

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<!-- Icons -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>

<!-- Popper -->
<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>

<!-- NOT WORKING BOOTSTRAP VERSION -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- WORKING BOOTSTRAP VERSION -->
<!--
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
-->

使用Bootstrap 4.3.1无法显示工具提示中的HTML表

1 个答案: