tooltip 2

HTML

<a class="tooltip" href="#">
    Hover 1
    <p class="eins">
        <img alt="" src="http://gympiegympie.de/beta/knack/wp-content/uploads/2017/11/Blitz_SecondFloor_CloseUp_©Simon_Vorhammer_2017_5_DSC1606.jpg" />
    </p>
</a>
<br /><br />
&nbsp;&nbsp;

<a class="tooltip" href="#">
    Hover 2
    <p class="zwei">
        <img alt="" src="http://gympiegympie.de/beta/knack/wp-content/uploads/2017/12/Blitz_SecondFloor_©Simon_Vorhammer_2017_5_DSC1561-Edit.jpg" />
    </p>
</a>

CSS

.tooltip {
    text-decoration:none;
    position:relative;
}

.tooltip p {
    display:none;
}

.tooltip p.eins {
    max-width: 50vw;
}

.tooltip p.zwei {
    max-width: 80vw;
}

.tooltip img{
    width: 100%;
}

.tooltip:hover p {
    display:block;
    position:fixed;
    overflow:hidden;
}

JavaScript

var tooltips = document.querySelectorAll('.tooltip p');

window.onmousemove = function (e) {
    var x = (e.clientX + 20) + 'px',
        y = (e.clientY + 20) + 'px';
    for (var i = 0; i < tooltips.length; i++) {
        tooltips[i].style.top = y;
        tooltips[i].style.left = x;
    }
};