Связываемое изображение с текстом, на который наведен курсор

В настоящее время вы устанавливаете атрибут title, чтобы получать подсказку типа всплывающей подсказки при наведении курсора на элемент. Если это то, что вы хотите сделать, но, возможно, просто сделайте текстовое поле желтым, я бы предложил использовать следующее:

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data]:hover:after {
  content: attr(data);
  padding: 4px 8px;
  color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 2;
  border-radius: 5px ;
  background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}

<a data = "This is the CSS tooltip showing up when you mouse over the link"href = "#" class = "tip">Link</a>

Приведенный выше код был предоставлен Пиюш Кушваха в эта почта. Просто измените тег привязки на свой тег изображения и примените стили по своему усмотрению.

Если во всплывающем окне вы ищете предупреждение для пользователя, которое требует взаимодействия для закрытия, вы можете использовать window.alert('text') в javascript вместе с обработчиком событий onmouseover.

<img src = "some_image.png" height = "46px" width = "57px" onmouseover = "window.alert('Some Message')"/>

В противном случае, если вы ищете другой элемент, который будет отображаться при наведении курсора на изображение, вы можете использовать немного javascript для отображения div или абзаца (действительно чего угодно) при наведении курсора мыши на img.

function showDiv() {
  document.getElementById('popupBox').style.display = 'block';
}

#popupBox {
  display: none;
}

<img src = "some_image.png" width = "41px" height = "57px" onmouseover = "showDiv()"/>
<div id = "popupBox">Some Popup Text</div>

Вы можете сделать это просто с помощью CSS, или вы можете использовать один из многих простых вариантов JavaScript «всплывающей подсказки». Bootstrap, например, имеет встроенный функция всплывающей подсказки, готовый к использованию. Если вам нужно что-то базовое, вот простой подход, основанный только на CSS, который вы можете настроить под свои нужды:

<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->    
<div class = "folder1" style = "padding: 200px;">
  <a href = "yourlinkhere" target = "_self" class = "popper">
    <img src = "https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height = "46" width = "57" />
    <span class = "pop-up">This is some text I want to display.</span>
  </a>  
</div>

<style>
  a.popper {
    display: inline-block;
    position: relative;
  }

  .pop-up {
    display: none;
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: 1rem 1.5rem;
    background: yellow;
    color: black;
  }

  a.popper:hover .pop-up,
  a.popper:focus .pop-up {
    display: block;
  }
</style>

По сути, вы позиционируете тег a относительно так, чтобы он мог иметь абсолютно позиционированные дочерние элементы, а затем, полагаясь на a:hover, вы показываете / скрываете дочерний элемент, используя свойство display дочернего элемента.

Вы также можете попробовать это, используя псевдоэлемент css

a{
  position: relative;
}



a:hover:after{
  display:block;
  content: "This is some text I want to display";
  width: 200px;
  background: yellow;
  position: absolute;
  top:0;
  padding: 20px;
}

<div class = "folder1" style = "margin: 70px">
<a href = "yourlinkhere" target = "_self" class = "">
<img src = "https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height = "46" width = "57"
</a>
</div>