负责任的工具提示/引导程序 4

Question

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

 $(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>