Линия лидера проходит через элементы ⇐ Html

[Anonymous]

Я пытаюсь создать приложение, в котором можно было бы задать объяснение для каждого слова. Большая проблема заключается в том, что линия выноски проходит через мой текст, а MiddleAnchor не работает с путем сетки.
Я хочу сохранить путь сетки и не менять его ни на что другое.
Ниже я оставлю HTML и JS.
Вот как это выглядит сейчас.

Код: Выделить всё

const form = document.querySelector('form');
const input = document.getElementById('search');
const wordcontainer = document.getElementById('words-container');
const descriptioncontainer = document.getElementById('description-container');

form.addEventListener('submit', (event) => {
event.preventDefault();

const value = input.value.trim();
wordcontainer.innerHTML = "";
descriptioncontainer.innerHTML = "";

if (value) {
const words = value.split(/\s+/);
const half = Math.ceil(words.length / 2);

words.forEach((word, index) => {
const isFirstHalf = index < half;
createWordElement(word, index, isFirstHalf);
});
}
});

function createWordElement(text, index, isFirstHalf) {
const h1 = document.createElement('h1');
h1.textContent = text;
h1.id = 'word-output-' + index;
h1.style.margin = "10px";
h1.style.position = "relative";
wordcontainer.appendChild(h1);

const h4 = document.createElement('h4');
h4.textContent = "LOREM IPSUM";
h4.id = "description-" + index;
h4.style.padding = "10px 5px";
h4.style.border = "1px solid #ccc";
h4.style.borderRadius = "4px";
h4.style.position = "relative"
h4.style.left = "50%"
descriptioncontainer.appendChild(h4);

setTimeout(() => {
const options = {
path: "grid",
startSocket: "bottom",
endSocket: isFirstHalf ? "left" : "right",
size: 2,
color: "black",
startSocketGravity: 0.1,
endSocketGravity: 30 * index,
endPlug: "behind"

};

new LeaderLine(
document.getElementById('word-output-' + index),
document.getElementById('description-' + index),
options
);
}, 50);
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/797 ... h-elements