Use of Images in HTML Tooltips

Written by @kerixa 3 March 2021

Tooltip is a place to put more description about an HTMl element when it is hovered. They are usually simple texts. However, you might need to put some images there. The following code example shows how to put images in tooltips.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
input {
    position: relative;
}

    input:hover {
        cursor: pointer;
    }

img {
    display: none;
    position: absolute;
    width: 100px;
    height: 100px;
    top: 30px;
    left: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 3px;
}
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<form action="">
  <input type="text" value="http://www.htmlfreecode.com/files/tooltip.png" />
  <img src="" alt="" />
</form>
<a target="_blank" href="http://www.htmlfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Free Code</a>
<script>
$(function () {
    $('input').hover(function () {
        var url = $('input').attr('value');
        $('img').attr('src', url);
        $('img').css('display', 'block');
    }, function () {
        $('img').css('display', 'none');
    });
});
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300