переменная `${name}` не вставляется в теге пикчер в стиль data-tooltip

Question

Идея написать резюме которое будет вести диалог с работодателем. Но вставить переменную в тег пикчер со стилем выводящим текст при наведении на изображение. Не выходит. http://nasobe.ru/resume/resume.html Интересно, есть ли какие либо возможные варианты решения этой проблемы. Не понимаю почему на самом деле переменная не выводится в текст для отображения ${name} и дело не в том что let name= localStorage.name; не видит. Видит, а как сгенерировать текст с localStorage.neme в классе стиля css для отображения подсказки с именем ${name} в момент наведения на картинку? То есть текст отображается и все работает, но в тексте переменная ${name} выводится как переменная, а не её значение вытащенное из localStorage. [фотография][1]

  let tooltipElem;
    document.onmouseover = function(event) {
      let target = event.target;
      // если у нас есть подсказка...
      let tooltipHtml = target.dataset.tooltip;
      if (!tooltipHtml) return;
      // ...создадим элемент для подсказки
      tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip';
      tooltipElem.innerHTML = tooltipHtml;
      document.body.append(tooltipElem);
      // спозиционируем его сверху от аннотируемого элемента (top-center)
      let coords = target.getBoundingClientRect();
      let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
      if (left < 0) left = 0; // не заезжать за левый край окна
      let top = coords.top - tooltipElem.offsetHeight - 5;
      if (top < 0) { // если подсказка не помещается сверху, то отображать её снизу
        top = coords.top + target.offsetHeight + 5;
      }
      tooltipElem.style.left = left + 'px';
      tooltipElem.style.top = top + 'px';
    };
    document.onmouseout = function(e) {
      if (tooltipElem) {
        tooltipElem.remove();
        tooltipElem = null;
      }
    };
    // if(window.location.href!='/resume/resume.html?talk'){
    //     console.log(window.location.href);
    // }
    
    if(window.location.search=='?talk'){
        console.log(window.location.search);
        // tageName('picture').classList.remove('.tooltip');
        // textP.innerHTML = `${person}`;
        textG.innerHTML = "Успех! Вот с такими мыслями (позитивными), выходят хорошие дела. Если конечно на них настроится. Проявить чуточку смелости для творчества... и можно со спокойной совестью (и чистой душой), творить и вытворять всевозможные (дела)!";
        console.log(localStorage.name);
       
        if(localStorage.name==null){
            textP.innerHTML = localStorage.getItem(name);
            let person = prompt('Как Вас зовут?', "Уважаемый персонаж!");
            alert('Очень приятно Достопочтейнейший '+ ' ' + `${person}` + ' , а я ЧикЧикли СпайсХендс Форсмажорович! (верстальщик?)! (\"Со стажем\"⌨(\"адаптивной верстки\") ?). и с зависимостью от javascript ? , неизлечимой ?'  );
            localStorage.setItem('name', person);
        }else{
            textP.innerHTML = "Приветствую Вас : "+'<span style="color:red; font-size:24px;">'+ localStorage.getItem('name')+'</span>' +'<span style="font-size:50px">?</span> ';
        }
    }

<style>
    .tooltip {
      position: fixed;
      padding: 10px 20px;
      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      font: italic 14px/1.3 sans-serif;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
    }
</style>

<picture>
    <source srcset="/resume/img-resume/imgfoto.webp" type="image/webp">
    <img src="img-resume/imgfoto.jpg" width="100%" alt="Амир Наврутдинов" data-tooltip="Хай, Доброго времени суток! Уважаемый персонаж! `${name}`<br>P.S. Кликнув по изображению со мной можно познакомится по ближе!">
</picture>

Answer 1

https://codepen.io/Crook/pen/poNLMxy

let tooltipElem;
document.onmouseover = function (event) {
    let target = event.target;
    if (!target.classList.contains("talk")) return;
    // если у нас есть подсказка...
    // if (target == )
    // ...создадим элемент для подсказки
    let name = localStorage.name ?? "Уважаемый персонаж!";
    tooltipElem = document.createElement("div");
    tooltipElem.className = "tooltip";
    tooltipElem.innerHTML = `Хай, Доброго времени суток! ${name}<br>P.S. Кликнув по изображению со мной можно познакомится по ближе!`;
    document.body.append(tooltipElem);
    // спозиционируем его сверху от аннотируемого элемента (top-center)
    let coords = target.getBoundingClientRect();
    let left = coords.left + (target.offsetWidth - tooltipElem.offsetWidth) / 2;
    if (left < 0) left = 0; // не заезжать за левый край окна
    let top = coords.top - tooltipElem.offsetHeight - 5;
    if (top < 0) {
        // если подсказка не помещается сверху, то отображать её снизу
        top = coords.top + target.offsetHeight + 5;
    }
    tooltipElem.style.left = left + "px";
    tooltipElem.style.top = top + "px";
};
document.onmouseout = function (e) {
    if (tooltipElem) {
        tooltipElem.remove();
        tooltipElem = null;
    }
};

let talk = document.querySelector(".talk");
talk.addEventListener("click", () => {
    if (localStorage.name == null) {
        let person;
        while (true) {
            person = prompt("Как Вас зовут?", "Уважаемый персонаж!");
            if (!person) {
                alert("Введите свое настоящие им'я");
            } else {
                localStorage.setItem("name", person);
                break;
            }
        }
        alert(
            `Очень приятно Достопочтейнейший ${person}, а я ЧикЧикли СпайсХендс Форсмажорович! (верстальщик?)! ("Со стажем"⌨("адаптивной верстки") ?). и с зависимостью от javascript ? , неизлечимой ?`
        );
    } else {
        alert(`Приветствую Вас : ${localStorage.getItem("name")}`);
    }
});

.tooltip {
    position: fixed;
    padding: 10px 20px;
    border: 1px solid #b3c9ce;
    border-radius: 4px;
    text-align: center;
    font: italic 14px/1.3 sans-serif;
    color: #333;
    background: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.talk {
    cursor: pointer;
}

<img src="https://picsum.photos/id/91/1920/1080" width="100%" alt="Амир Наврутдинов" class="talk">

БЛОГ НА HUSL

переменная `${name}` не вставляется в теге пикчер в стиль data-tooltip

Ответы (1 шт):