Как разместить поповер Bootstrap относительно окна просмотра (в качестве заметки на полях)? - PullRequest
Новая
       39

Как разместить поповер Bootstrap относительно окна просмотра (в качестве заметки на полях)?

0 голосов
/ 26 апреля 2020

Я готовлю веб-издание для книги со сносками. Моя идея состоит в том, чтобы после сноса показывать сноски в виде Bootstrap всплывающих окон в правом поле окна просмотра (как бы «страницы»), стилизованных под обычные заметки на полях в книге. Как мне сделать это таким образом, чтобы все всплывающие подсказки сноски были аккуратно выровнены относительно правой стороны основного текста?

Вот минимальный пример: 

jQuery(document).ready(function() {jQuery('[data-toggle="popover"]').popover()});
body {
  margin: 25vw;
  counter-reset: footnotecounter;
  text-align: justify;
}

span.footnote:before {
  counter-increment: footnotecounter;
  content: counter(footnotecounter);
  position: relative;
  top: -0.4em;
}

span.footnote {
    color: red;
}

.popover {
  display: inline-block;
  width: 20vw;
  background-color: CornFlowerBlue;
  padding:10px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;     charset=UTF-8">
    <title>Chapter 1</title>
    
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 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.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>



  </head>
  <body>
    <h1>A minimal example</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus<span class="footnote" data-toggle="popover" data-content="Look at me! I'm an interesting footnote."></span> posuere nisl, et finibus odio volutpat ac. Maecenas rhoncus condimentum justo, eu congue sapien sagittis at. Aenean<span class="footnote" data-toggle="popover" data-content="Look at me too! I'm another interesting footnote."></span> aliquet varius dui, nec cursus purus interdum eget. Quisque vulputate justo eget enim dictum efficitur. Cras vehicula lorem et mattis consequat. In nibh ligula, lobortis et euismod non, iaculis vel risus. Duis odio tortor, pretium vitae erat at, convallis aliquet nibh. Sed enim magna, pulvinar et pulvinar id, dignissim congue velit. Suspendisse potenti. Maecenas> vel ante convallis, rhoncus lacus nec, egestas massa. Donec nunc massa, feugiat at ullamcorper non, posuere vitae dui. Integer mattis, velit porttitor hendrerit rhoncus, dui arcu sagittis tellus, ut hendrerit tellus nisl ut massa. Fusce imperdiet dignissim neque, ut sollicitudin elit pulvinar</p>
  </body>
</html>

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

Спасибо за чтение и хорошего дня!

...