Добавление компонента всплывающей подсказки с помощью JavaScript ⇐ CSS

[Anonymous]

Я пытаюсь добавить всплывающие подсказки в собственном стиле к различным компонентам.
Сейчас я делаю следующее:

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

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

    var checkbox = document.querySelector("#someForm .ui-selection-column .ui-chkbox");
if (checkbox && (!checkbox.nextElementSibling || !checkbox.nextElementSibling.classList.contains("my-tooltip"))) {
createTooltipComponent(checkbox, "This is my tooltip!", false);
}

• Создание нового компонента всплывающей подсказки и добавление его в качестве прямого родственного компонента

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

function createTooltipComponent(component, text, tooltipShouldBeToTheLeft) {
console.log("Create tooltip compoment for ");
console.log(component);
var tooltipComponent = document.createElement('div');
tooltipComponent.innerHTML = text;
tooltipComponent.classList.add("my-tooltip");

if (tooltipShouldBeToTheLeft) {
tooltipKomponente.classList.add("my-tooltip-to-the-left");
} else {
tooltipKomponente.classList.add("my-tooltip-to-the-right");
}

component.parentNode.insertBefore(tooltipComponent, component.nextSibling);
}

• Стилизация компонента всплывающей подсказки

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

.my-tooltip {
position: absolute;
background-color: #1e3a61;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
z-index: 1000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.my-tooltip-to-the-left::after,
.my-tooltip-to-the-right::before {
content: '';
position: absolute;
border-width: 5px;
border-style: solid;
top: 36%;
border-color: transparent;
}

.my-tooltip-to-the-left::after {
border-left-color: #1e3a61;
left: 100%;
}

.my-tooltip-to-the-right::before {
border-right-color: #1e3a61;
right: 100%;
}

Меня пока не беспокоит тот факт, что div-подсказка должна быть видна только при наведении курсора на исходный компонент. Я все еще пытаюсь разобраться со стилем - всплывающая подсказка должна быть всегда полностью видна, но в зависимости от компонента, для которого она предназначена (который иногда имеет определенный атрибут display или Position), всплывающая подсказка div часто отображается под div, а не рядом с ним. Кроме того, если родительский контейнер для обоих компонентов слишком мал, подсказка будет обрезана. Есть ли способ стилизовать компонент всплывающей подсказки с помощью CSS (и без стилизации компонента, для которого предназначена всплывающая подсказка) таким образом, чтобы всплывающая подсказка всегда отображалась полностью и прямо рядом с ней? (В идеале, чтобы всплывающая подсказка находилась слева ИЛИ справа от нее, в зависимости от класса.)

Подробнее здесь: https://stackoverflow.com/questions/786 ... javascript