【问题标题】:Using style='' inside boostrap tooltip在引导工具提示中使用 style=''
【发布时间】:2020-06-17 12:11:06
【问题描述】:

我有以下 HTML:

<a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span style=&quot;color: #FF9AA2&quot;>Red</span>" aria-describedby="tooltip92967">My Tooltip Demo</a>

引导工具提示正确显示,但跨度颜色变为红色。如何设置跨度的样式,以便在工具提示内应用颜色?所有文本都是引导工具提示的标准白色。

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    您可以尝试以下方法,将颜色设置为链接元素的数据属性。

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })
    
    $('[data-toggle="tooltip"]').on('inserted.bs.tooltip', function () {
      var c = $(this).data("color");
      $('.tooltip span').css('color',c);
    })
    a {
     margin:50px;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
    
    <a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >Red</span>" data-color='#FF9AA2' aria-describedby="tooltip92967">My Tooltip Demo</a>
    
    <a href="#" title="" data-toggle="tooltip" data-html="true" data-original-title="1 bookmark<br/>Category: <span >green</span>" data-color='#00FF22' aria-describedby="tooltip92967">another Tooltip Demo</a>

    参考:https://getbootstrap.com/docs/4.4/components/tooltips/#events

    【讨论】:

    • 不幸的是,这无济于事,因为我需要为每个 href 动态设置跨度颜色。
    • @Chud37 颜色已设置为每个 href
    • 哦,我明白了,抱歉,我的手机上没有完整的答案。我试试看。
    猜你喜欢
    • 2014-01-07
    • 1970-01-01
    • 2019-03-17
    • 1970-01-01
    • 1970-01-01
    • 2013-05-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多