Всплывающая картинка при наведении на текст

Простая задача оказалась для wordpress трудновыполнимой и потребовала нескольких часов изысканий. Я даже устанавливал несколько плагинов для tooltip и image hover. Но они тоже отказались работать в моей установке wordpress - какой-то выводил только 1 раз картинку, другой был очень избыточным для такой задачи. 

Я знал, что задача решается css стилем hover, в интернете полно решений, но из множества примеров у меня сработал только один. Остальные -или не выводили картинку, или прятали всё вместе с текстом, или показывали все вместе с картинкой.

В итоге остановился вот на таком стиле (нашел тут)

.popup-img-wrapper span{
  border-radius: 5px 5px 5px 5px;
  visibility: hidden;
  position: absolute;
  opacity: 90%;
  left: 25vw;
  background: #f1eaea;
  box-shadow: -2px 2px 2px -1px #2f2e2e;  
  border-radius: 5px;
  width: auto;
  z-index: 9999;
}
u.dotted { border-bottom: 1px dashed #999; text-decoration: none;}
.popup-img-wrapper:hover span{
visibility: visible;
}

Текст оформлял в коде так:

<div class="popup-img-wrapper"><u class="dotted">Axpert King</u> <span id="#"> <img src="https://Axpert-KING.jpg" width="200" /> </span></div>

Пришлось добавить в тег span пустой id - иначе визуальный редактор wordpress удалял его. Это известная проблема TinyMCE.