负责任的工具提示/ bootstrap 4

Question

我的工具提示有问题。所以我有一个按钮。这是： 我有这样一个按钮的工具提示。 当我通过调整我的浏览器大小来改变屏幕的一面时它会变成：所以我的工具提示没有响应。我试图通过使用bootstrap解决它，但它没有找到任何解决方案。所以这是我的代码示例：

$(document).ready(function() {
  var nbP = $('.container-tooltip p').length;
  var w = parseInt($('.container-tooltip p').css("width"));
  var max = (nbP - 1) * w;

  $('body').on('click', '.close-tooltip', function() {
    $('.container-tooltip').animate({
      'top': -1200
    }, {
      duration: 500,
      queue: false,

    });
  });
});

.rus-tip {
  font-size: 18px;
  color: #2C2C2C;
  margin: 50px 42px 0px 40px;
  text-align: center;
  font-family: 'Open Sans', sans-serif !important;
}

.container-tooltip {
  position: fixed;
  width: 280px;
  height: 135px;
  left: 93%;
  top: 30%;
  margin-top: -119px;
  margin-left: -200px;
  background-color: #F3F3F3;
  border-radius: 6px;
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.container-tooltip:before {
  content: '';
  display: block;
  position: absolute;
  left: 250px;
  bottom: 100%;
  width: 0;
  height: 0;
  border-bottom: 10px solid #F3F3F3;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.close-tooltip {
  cursor: pointer;
}

.close-tooltip:after {
  content: "╳";
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 12px;
}

.close-tooltip:before {
  right: 40px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-lang {
  text-transform: uppercase;
  background-color: #7726E5;
  color: #fff;
}

.btn-lang:not(:disabled):not(.disabled).active,
.btn-lang:not(:disabled):not(.disabled):active,
.show>.btn-lang.dropdown-toggle {
  color: #fff;
  background-color: #5E1EB8;
  border-color: #5E1EB8;
}

.btn.btn-lang.active[disabled] {
  background-color: #5D1EB5;
  opacity: 1!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <div class="btn-group" role="group" aria-label="Choose Language">
    <input type="submit" name="language" value="en" class="btn btn-lang" disabled>
    <input type="submit" name="language" value="ua" class="btn btn-lang" disabled>
    <div class="container-tooltip">
      <h1 class="rus-tip">Хотите перевести сайт на русский?</h1>
      <span class="close-tooltip"></span>
    </div>
  </div>
</form>

对不起我的英语不好

Answer 1

您可以尝试使用引导程序执行<div class="container"> <form class="col-3"> your form </form> </div>