Question

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<style>
.red-tooltip.tooltip-inner {
background-color:red;
}
.red-tooltip + .tooltip-inner {
background-color:red;
}
.red-tooltip > .tooltip-inner {
background-color:red;
}
.red-tooltip ~ .tooltip-inner {
background-color:red;
}
</style>

</head>

<body>
<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>

我在设计特定的引导工具提示时遇到麻烦。我了解到我可以使用以下这些工具通用设置所有工具提示的样式：

.tooltip-inner {
// Styles
}
.comment-tooltip .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
// Styles
}

等等所有工具提示箭头。但是如何设置特定工具提示的样式（即一个元素的工具提示）。例如，假设这是我的HTML：

<span class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">
Tooltip
</span>

我尝试了所有CSS组合器（如下所示），但似乎没有一个让我使用red-tooltip类的工具提示样式

.red-tooltip.tooltip-inner {
background-color:#ff0000;
}
.red-tooltip ~ .tooltip-inner {
background-color:#ff0000;
}
.red-tooltip > .tooltip-inner {
background-color:#ff0000;
}
.red-tooltip + .tooltip-inner {
background-color:#ff0000;
}

任何见识将不胜感激！

Answer 1

使用Bootstrap 4.0.0

.tooltip-inner类将使我们能够更改工具提示的背景颜色。

此外，请确保遵循Bootstrap文档中的Tooltips概述。

工具提示依赖于第三方库Popper.js进行定位。您必须在bootstrap.js之前包含popper.min.js或使用   bootstrap.bundle.min.js / bootstrap.bundle.js包含Popper.js   为了使工具提示起作用！

出于性能原因选择使用工具提示，因此您必须自己对其进行初始化。

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <span href="#" data-toggle="tooltip" data-placement="bottom" title="Some tooltip text!">Hover over me</span>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })
  </script>
  <style>
    .tooltip-inner {
      background-color: red;
    }
    
    .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
    .bs-tooltip-bottom .arrow::before {
      border-bottom-color: red !important;
    }
  </style>
</body>

</html>

Answer 2

如果在悬停时只想对一种工具提示应用特定样式，希望对您有所帮助。

<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">

</head>

<body>
    <span id="myTooltip" class="red-tooltip" data-toggle="tooltip" data-placement="top" title="Hello world">Hover me</span>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
    <style>
        .red {
            background-color: red !important;
        }
    </style>

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

        // for store a random Id, we will use it to remove
        // the style we append to the document on tooltip hover
        var randomId;
         // get the tooltip to apply the style
        $('#myTooltip').hover((event) => {
            if (event.type == 'mouseenter' || event.type == 'mouseover') {
                // generate random Id and append the style to head
                randomId = 'tooltip' + Math.floor(Math.random() * 100) + 1;

                // append the style to the head
                $('head').append(
                    `<style data-remove="${randomId}">
                        .tooltip-inner{ 
                            background-color: red;
                        }
                        .bs-tooltip-auto[x-placement^=bottom] .arrow::before, 
                        .bs-tooltip-bottom .arrow::before {
                            border-bottom-color: red !important;
                        }
                    </style>`
                );
            }
            else if (event.type == 'mouseout' || event.type == 'mouseleave') {
                // we remove the style so doesn't effect other tooltip,
                // we wait to the tooltip fade
                setTimeout(() => {
                    $(`[data-remove="${randomId}"]`).remove();
                }, 100)
            }
        })
    </script>
</body>

</html>

Bootstrap 4-特定工具提示的样式（来自ID或类）

2 个答案: