更改引导工具提示CSS焦点

Question

我想更改手动触发的工具提示的背景颜色。

我有一些使用引导程序输入的字段。以下是HTML。

HTML

<div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 form-group">
            <form method="post" action="index.php">
                <div class="row">
                    <div class="col-md-6">
                        <label for="rn">Student ID:</label>
                        <input type="text" data-toggle="tooltip" title="Your ID goes here" class="form-control" id="rn" name="rn" data-trigger="manual">
                    </div>
                    <div class="col-md-6">
                        <label for="fname">Student Name:</label>
                        <input type="text" class="form-control" id="fname" name="fname" title="Your Name goes here" data-toggle="tooltip" data-trigger="manual">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="deg">Student Degree:</label>
                        <input type="text" class="form-control" id="deg" name="deg" title="Your Degree Program goes here" data-toggle="tooltip" data-trigger="manual">
                    </div>
                    <div class="col-md-6">
                        <label for="cam">Student Campus:</label>
                        <input type="text" class="form-control" id="cam" name="cam" title="Your University Campus goes here" data-toggle="tooltip" data-trigger="manual">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="city">Student City:</label>
                        <input type="text" class="form-control" id="city" name="city" title="Your University City goes here" data-toggle="tooltip" data-trigger="manual">
                    </div>
                </div>
                <div class="row">
                    <input type="submit" value="Save" name="save" class="btn btn-block btn-primary">
                </div>
            </div>
        </form>

如果该字段为空，我将获得提示显示焦点。

jQuery

$(document).ready(function(){
            $("#rn, #fname, #deg, #cam, #city").focus(function(){
                if(!$(this).val()){
                    $(this).tooltip("show");
                }
            });
            $("#rn, #fname, #deg, #cam, #city").blur(function(){
                $(this).tooltip("hide");
            });
        });

我正在使用CSS更改工具提示的背景颜色，但是它不起作用。我从另一篇文章中获得了这段代码。

CSS

.form-control + .tooltip > .tooltip-inner{
    background-color: #EE022C;
}

Answer 1

检查是否适合您！

将css选择器修改为.tooltip > .tooltip-inner

$(document).ready(function() {
  $("#rn, #fname, #deg, #cam, #city").focus(function() {
    if (!$(this).val()) {
      $(this).tooltip("show");
    }
  });
  $("#rn, #fname, #deg, #cam, #city").blur(function() {
    $(this).tooltip("hide");
  });
});

.tooltip > .tooltip-inner {  background-color: #EE022C !important;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4 form-group">
    <form method="post" action="index.php">
      <div class="row">
        <div class="col-md-6">
          <label for="rn">Student ID:</label>
          <input type="text" data-toggle="tooltip" title="Your ID goes here" class="form-control" id="rn" name="rn" data-trigger="manual">
        </div>
        <div class="col-md-6">
          <label for="fname">Student Name:</label>
          <input type="text" class="form-control" id="fname" name="fname" title="Your Name goes here" data-toggle="tooltip" data-trigger="manual">
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label for="deg">Student Degree:</label>
          <input type="text" class="form-control" id="deg" name="deg" title="Your Degree Program goes here" data-toggle="tooltip" data-trigger="manual">
        </div>
        <div class="col-md-6">
          <label for="cam">Student Campus:</label>
          <input type="text" class="form-control" id="cam" name="cam" title="Your University Campus goes here" data-toggle="tooltip" data-trigger="manual">
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label for="city">Student City:</label>
          <input type="text" class="form-control" id="city" name="city" title="Your University City goes here" data-toggle="tooltip" data-trigger="manual">
        </div>
      </div>
      <div class="row">
        <input type="submit" value="Save" name="save" class="btn btn-block btn-primary">
      </div>