JSFiddle - React, Tailwind, and code Playground

by Mark Ulybkin

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>


  <blockquote>
    - Что на завтрак, Бэрримор?
    - Овсянка, сэр.
    - А на обед?
    - Овсянка, сэр.
    - Ну а на ужин?
    - Котлеты, сэр.
    - Уррра!!!
    - Из овсянки, сэр!!!
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>

CSS

.note {
  position: fixed;
  z-index: 1000;
  padding: 5px;
  border: 1px solid black;
  background: white;
  text-align: center;
  font: italic 14px Georgia;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 0 0 0 100px;
  padding: .5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  display: inline-block;
  white-space: pre;
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: .1em;
  margin-right: .25em;
  vertical-align: -.4em;
}

JavaScript

function positionAt(anchor, position, elem) {
      var value = anchor.getBoundingClientRect();

      switch(position) {
        case 'top':
        elem.style.left = value.left + 'px';
        elem.style.top = value.top - elem.offsetHeight + 'px';
        break;

        case 'right':
        elem.style.left = value.left + anchor.offsetWidth + 'px';
        elem.style.top = value.top + 'px';
        break;

        case 'bottom':
        elem.style.left = value.left + 'px';
        elem.style.top = value.top + anchor.offsetHeight + 'px';
        break;
      }
    }

    /**
     * Показывает заметку с текстом html на позиции position
     * относительно элемента anchor
     */
    function showNote(anchor, position, html) {
      var div = document.createElement('div');
      div.innerHTML = html;
      div.className = 'note';
      document.body.appendChild(div);

      positionAt(anchor, position, div);
    }

    // проверка работоспособности
    var blockquote = document.querySelector('blockquote');

    showNote(blockquote, "top", "заметка сверху");
    showNote(blockquote, "right", "заметка справа");
    showNote(blockquote, "bottom", "заметка снизу");