使用 CSS 更改 Bootstrap 工具提示样式

Question

我安装了 Bootstrap 4.5.0 并且运行但我正在尝试调整工具提示的样式。下面的代码。

我在页面顶部包含了样式表：

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.5/assets/css/docs.min.css">

    <link href="mystylesheet.css" rel="stylesheet">

然后我在页面中有工具提示标记：

<span id="custom-tooltip" data-toggle="tooltip" data-placement="top" data-html="true" title="TTooltip tests">
    <svg ...></svg>
</span>

我有底部的所有 JS 来处理 bootstrap 和工具提示：

    <!-- jQuery first, then Popper.js, then Bootstrap JS --><
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <!--Enable tooltips from Popper.js-->
    <script type="text/javascript">
        $(function ()
        {
            $('[data-toggle="tooltip"]').tooltip()
        });
    </script>

我尝试将以下内容添加到 mystylesheet.css 但没有任何反应：

span#custom-tooltip .tooltip
{
    background-color: green !important;
}

上面的背景变化只是一个例子。除了颜色之外，我还想要其他 CSS 类型更改。

Answer 1

如 docs、

中所述

.tooltip元素在触发元素外生成。像这样：

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

所以，这样的样式 span#custom-tooltip .tooltip 是行不通的。你必须做这样的事情：

.tooltip
{
    background-color: green !important;
}

但这会将样式应用于所有工具提示。如果您只想为您的元素指定特定样式，请执行以下操作：

$('#example').tooltip({
    html: true,
    title: 'xyz',
    template: `
        <div class="custom-tooltip tooltip">
            <div class="tooltip-inner"></div> /* leave it blank so the title will fill in dynamically here by bootstrapjs */
        </div>
    `
});

然后样式：

.custom-tooltip {
    /* your styles here */
}

点击这里了解更多config options

使用 CSS 更改 Bootstrap 工具提示样式

Changing Bootstrap tooltip styles using CSS

html

css

tooltip

twitter-bootstrap

bootstrap-4