Как добавить подсказки?

Question

[oksanatkachik094]

допустим навожу на первый итем - то над ним будет test 1
на второй block 1 (не важно какой текст)
и тд
https://codepen.io/Olya097/pen/GRxEjog

Answer 1

[0xD34F]

data: () => ({
  items: [
    { text:  '69', tooltip:  'hello, world!!' },
    { text: '187', tooltip:  'fuck the world' },
    { text: '666', tooltip: 'fuck everything' },
  ],
}),

<div
  v-for="n in items"
  v-text="n.text"
  :data-tooltip="n.tooltip"
  class="item"
></div>

.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: red;
  width: 150px;
  height: 50px;
  margin: 10px;
  position: relative;
}
.item:hover::before {
  content: attr(data-tooltip);
  display: inline-block;
  background: blue;
  color: white;
  position: absolute;
}

Comments

[oksanatkachik094]

0xD34F, но проблема в том что последняя подсказка вылазит
а средняя переносится
https://codepen.io/Olya097/pen/mdxwrxP

[0xD34F]

oksanatkachik094, ваш вопрос был не об этом. Так что дальше сами. Или новый вопрос задавайте. Или на фриланс.

Answer 2

[Михаил Барзун]

подсказки при наведении на элемент это аттрибут title, в твоем случае - :title="переменная с подсказкой"