Question

我有自定义工具提示，有data-html="true"无法正常工作，我在这里找不到问题所在。

  .tooltip-custom {
        display: inline;
        position: relative;
     }
    .tooltip-custom:hover span::after {
        position: absolute;
        z-index: 98;
        width: 14em;
        padding: 0.4em 1em;
        bottom: 1.2em;
        left: 0;
        border-radius: 0.4em;
        background: #333;
        background: rgba(0,0,0,.8);
        color: #fff;
        text-align: center;
        content: attr(data-title);
     }

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

<div class="float-right mb-0 tooltip-custom p-5 m-5">
                                        my Tooltip
                                        <span data-html="true" data-title="
                                        <ul class='trading-rules-tooltip-box'>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                        </ul>
                                        <a href='#' class='float-left'>View More</a>
                                        " ></span>
                                    </div>

谢谢您的努力！

Answer 1

为什么不只使用Bootstrap工具提示？似乎您正在尝试执行Bootstrap已经在做的事情。

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

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


                                        
                                        <span data-toggle="tooltip" data-html="true" data-title="
                                        <ul class='trading-rules-tooltip-box'>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                            <li><span>Minimum Trade Amount</span> <span>0.000000 BTC</span></li>
                                        </ul>
                                        <a href='#' class='float-left'>View More</a>
                                        " >my Tooltip</span>

为什么data-html =“ true”不能与工具提示一起使用？

1 个答案: