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 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='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!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Designer Diva, Jirgensons E, vamsi, wapmohin, azmir
advertisement 2