4

Использую Bootstrap. Имеется форма. Я беру компонент tooltip и прикрепляю к инпутам, всё ок, все красиво, все работает без дописывания стилей.

Проблема в том, я хочу использовать компонент Tooltip внутри компонента Popover bootstrappopover у меня имеется форма, к инпутам подключаю tooltip). В данной ситуации tooltip слипаются в верхнем левом углу.

Пример - https://jsfiddle.net/martdn/pzmt4upb/4/
1

1 ответ 1

4

Проблема была в том, что при использование компонента tooltip внутри компонента popover, приводило к некорректному позиционированию элементов подсказок. Из-за того, что не успевает посчитать позицию подсказок tooltip.

Решение - подсказки выводим после завершение загрузки навигации CSS. С помощью стандартного события Bootstrap shown.bs.popover

$('#popover').on('shown.bs.popover', function() { myTooltip(); });

Файлы с кодом на gist

//Tooltip content
var myTooltip = function() {
  $('.has-error input').tooltip({
    placement: 'left',
    title: function() {
      return $('#message').html();
    }
  }).tooltip('show');
}

//Popover
jQuery(document).ready(function() {

  //Popover Content
  $("#popover").popover({
    html: true,
    trigger: 'click',
    content: function() {
      return $('#popoverContent').html();
    }
  });

  //Show tooltip
  $('#popover').on('shown.bs.popover', function() {
    myTooltip();
  });

  //Remove tooltip when closing popover
  $('#popover').on('hide.bs.popover', function() {
    $('.tooltip').remove();
  });
});
body {
  width: 800px;
}
.container {
  padding-top: 50px;
  width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <button id="popover" type="button" class="" data-placement="bottom">on click</button>

  <!--popoverContent-->
  <div id="popoverContent" style="display: none">
    <form>
      <div class="form-group has-error">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" placeholder="Email">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

</div>

<div id="message" style="display:none;">Вы не ввели email</div>

3
  • 1
    а в чем решение-то заключается? в чем была проблема?
    – Grundy
    3 фев 2016 в 7:23
  • @Grundy Проблема была в том, что при использование компонента tooltip внутри компонента popover, приводило к некорректному позиционированию элементов подсказок. Из-за того что не успевает посчитать позицию подсказок tooltip. Решение - подсказки выводим после завершение загрузки навигации CSS. С помощью стандартного события bootstrap shown.bs.popover $('#popover').on('shown.bs.popover', function() { myTooltip(); }); Возможно для кого-то было очевидным данное решение. Но я не сразу справился с данной задачей. Возможно не достаточно знаю компоненты Bootstrap
    – martdn
    3 фев 2016 в 8:13
  • Стоит добавить это пояснение в ответ.
    – Grundy
    3 фев 2016 в 8:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.