Не удается сохранить позиции TagName в массиве - PullRequest
Новая
       3

Не удается сохранить позиции TagName в массиве

0 голосов
/ 13 июля 2020

У меня есть страница, на которой отображается история с кнопками на кнопке до go со страницы 1 на страницу 2 и 3 и наоборот, история находится в позиции одного массива, которую я вырезал, используя длину символа для заполнения каждой страницы. Текст, который я добавляю к абзацам на каждой странице, содержит теги. Я пытаюсь добавить всплывающие подсказки для каждого бита, который я выделил жирным шрифтом. Я пытаюсь разместить все на странице, записать координаты x и y, а затем создать элемент с текстом, который необходим для каждого элемента. Вот пример того, как выглядит мой код 

 pageItemsArray = [
      ['The <b tooltip ="make: rennault">car</b> is a round <b tooltip ="name: oak">tree</b>.']
      ['make: rennault', 'name: oak']
 ]

note: tooltip = "make: rennault" и tooltip = "name: oak" предназначен только для людей, пытающихся решить эту проблему с помощью css, и не существует для людей, пытающихся решить эту проблему с помощью javascript, однако его не нужно удалять

html: 

 <p class="insertStoryPageHere"><p>

javascript: 

 for(i=0; i<document.getElementsByTagName("b").length; i++) {
     /*run code for all tooltips here*/

 element = document.createElement("SPAN");
 element.innerHTML = pageItemsArray[1][i].toString();
 element.setAttribute("class", "tooltip");
 document.body.appendChild(element);
 

 x = document.getElementsByTagName("b")[i].offsetLeft; 
 y = document.getElementsByTagName("b")[i].offsetTop;

 element.setAttribute("left", x);
 element.setAttribute("top", y);

 }

Однако промежутки расположены внизу страницы, а не где-то рядом с тем, где они должны быть.

Обновление: все еще не ответили: (

heres css для людей, пытающихся решить с помощью css

 b:hover[tooltip]:before {
     content: attr(tooltip);
     position: absolute; 
     z-index: 1;
     top: 0rem;
     left: 0rem;
     padding: 5px;
     background-color: black; 
     color: white;
     border-radius: 5px;

 .insertStoryPageHere {
     position: relative;
     font-family: Proxima;
     font-size: 16px;
     line-height: 2em;
     height: 311px;
 }

Проблема с решением css заключается в том, что всплывающие подсказки перемещают текст абзаца при наведении ...

Как это выглядит с css

1 Ответ

0 голосов
/ 13 июля 2020

Вот быстрое и грязное решение CSS. Я просто добавил атрибут tooltip к <b> с некоторым текстом (хотя и немного отличным от вашего массива). Это должно дать вам некоторое направление. Нет необходимости в сложной конструкции с запоминанием позиций и всего прочего. Делайте вещи простыми и избавьте от головной боли для действительно сложных вещей. 

body { margin: 0; padding: 5rem } /* some spacing */

p { position: relative } /* creat a stacking context */

b:hover[tooltip]:before {
    content: attr(tooltip);
    position: absolute; 
    /* position within parent stacking context (the <p>, default is <body>) */
    
    top: -2.5rem;
    padding: 0.5rem;
    background-color: black; color: white;
}
<p>this is a text about <b tooltip="car brand">Renault</b> and how you can keep it running for <b tooltip="unit of time">years</b>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...