Почему всплывающая подсказка неуместна? - PullRequest
Новая
       13

Почему всплывающая подсказка неуместна?

0 голосов
/ 02 июля 2019

Я знаю, что, может быть, это что-то глупое, но я не могу привести всплывающие подсказки в правильное положение, они всегда находятся в нерабочем положении

Я искал здесь ответы и пытался изменить порядок сценариев, добавлять другие сценарии, извлекать сценарии и т. Д., Но, похоже, ничего не работает.

вот мои сценарии 

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

так я инициализирую всплывающие подсказки 

    $('[data-toggle="tooltip"]').tooltip({
        container: 'body'
    });

и это подсказка 

    <a class="social-button shape-rounded sb-facebook" href="#" data-toggle="tooltip" data-placement="top" title="Facebook" data-original-title="Facebook">
             <i class="fab fa-facebook-f"></i>
    </a>

и это текущий результат

wrong position

UPDATE

Добавление большего пространства сверху, как предложено, также не сработало

enter image description here

1 Ответ

0 голосов
/ 03 июля 2019

Вам нужно установить margin-top на div, который обернет ваш tooltips, чтобы показать tooltip на top. Ниже приведен рабочий фрагмент 

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
.container {
  margin: 100px;
  text-align: center
}

a {
  margin: 0px 20px;
  padding:20px
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <a class="border" href="#" data-toggle="tooltip" data-placement="top" title="Facebook"> <i class="fab fa-facebook-f"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="bottom" title="twitter"> <i class="fab fa-twitter"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="left" title="instagram"> <i class="fab fa-instagram"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="right" title="linkedin"> <i class="fab fa-linkedin"></i></a>
</div>
...