Как передать в всплывающую подсказку маркированный список?

Question

[Вечно Крайний]

Здравствуйте! У меня такая проблема. Мне нужно при наведение на ячейку таблицы получить всплывающую подсказку, в которой будет маркированный список. Проблема в том что:
1. Не известен текст заранее, то есть нельзя по умолчанию прописать.
2. Не известно кое количество пунктов будет в этом списке, может как 1 так и 5, но не супер много, обычно 1-3.
Не до конца понимаю в каком виде я должен их php в фронт передать этот список, чтобы он корректно отображался

Answer 1

[Spartak (Web-StyleStudio)]

Использовать плагины подсказок, их полно в интернете, например этот https://atomiks.github.io/tippyjs/
Для html контента всплывающей подсказки
https://atomiks.github.io/tippyjs/v6/html-content/

Comments

[Алексей]

Да можно и в title писать)

[Spartak (Web-StyleStudio)]

Алексей,

в title писать)

В title html контент не будет работать

[Вечно Крайний]

Вроде это то что нужно, я почитал в документации. Правильно понимаю, что в tippy() я не могу в первом аргументе указать все элементы с таким то классом. Например у меня столбец где все ячейки столбца с одним классом
<th class="firstClass">text<th>
Вся таблица выводиться циклом построчно
Все данные приходят из PHP.
Получается мне нужно будет в каждую ячейку запихать скрытый див?

<div сlass="template_firstClass" style="display: none;">
    <ul>
        <li>first marker</li>
        <li>second marker</li>
        <li>third marker</li>
    </ul>
</div>

Я тогда не совсем понимаю как обратиться в tippy чтобы именно при наведении на конкретную ячейку выводилась всплавющая подсказка с нужными данными именно для этой ячейки

[Spartak (Web-StyleStudio)]

Вечно Крайний,

<th class="firstClass" data-tippy-content="<ul><li>first marker</li><li>second marker</li><li>third marker</li></ul>">
	Содержимое ячейки №1
</th>
<th class="firstClass" data-tippy-content="<ul><li>first marker</li><li>second marker</li><li>third marker</li></ul>">
	Содержимое ячейки №2
</th>

//подключаете плагин tippy.js 
// в качестве селектора класс firstClass
tippy(".firstClass", {
	allowHTML: true,
});

//либо в качестве селектора атрибут data-tippy-content
//tippy("[data-tippy-content]", {allowHTML: true});

//можно указать несколько селекторов 
//tippy(".firstClass, .secondClass, [data-tippy-content]", {allowHTML: true});

[Spartak (Web-StyleStudio)]

Вечно Крайний,

Правильно понимаю, что в tippy() я не могу в первом аргументе указать все элементы с таким то классом.

Не правильно, можете.
Можно указать сколько угодно классов, айдишников, атрибутов, вообщем-то любые селекторы. Контент подсказок указываете в атрибуте data-tippy-content для указанных селекторов

[Spartak (Web-StyleStudio)]

Вечно Крайний,
Можно ещё так реализовать
HTML

<th class="firstClass">
	<div class="hintTippy" data-tippy-content="<ul><li>first marker</li><li>second marker</li><li>third marker</li></ul>">Содержимое ячейки №1</div>
</th>
<th class="firstClass">
	<div class="hintTippy" data-tippy-content="<ul><li>first marker</li><li>second marker</li><li>third marker</li></ul>">Содержимое ячейки №2</div>
</th>

JS

tippy(".hintTippy", {
  allowHTML: true,
});

[Вечно Крайний]

Спасибо большое! Просто я пытался реализовать через Element.innerHTML

const template = document.getElementById('template');

tippy('button', {
  content: template.innerHTML,
  allowHTML: true,
});