I have an <img> in an MVC 4 Razor Display Template, and I'd like to display a tooltip containing the full sized image when the user hovers over the image.

HTML:

<img height="50" width="50" src="@Model.ImageString" />

@Model.ImageString contains an image data string, which looks like this:

"data:image/*;base64," + Convert.ToBase64String(file.Data)

If you couldn't guess, file.Data is a byte[].

How can I display a full-sized tooltip upon hovering the <img>?

I have an <img> in an MVC 4 Razor Display Template, and I'd like to display a tooltip containing the full sized image when the user hovers over the image.

HTML:

<img height="50" width="50" src="@Model.ImageString" />

@Model.ImageString contains an image data string, which looks like this:

"data:image/*;base64," + Convert.ToBase64String(file.Data)

If you couldn't guess, file.Data is a byte[].

How can I display a full-sized tooltip upon hovering the <img>?

• javascript
• jquery
• html
• image
• asp-mvc-4

• Google "display image on rollover" and you'll be presented with numbers of ways of doing it. – Terry Commented Aug 12, 2013 at 21:52

3 Answers 3

Here is a very quick example: http://jsfiddle/bGn96/

This is along the lines of what Shan Robertson is suggesting.

var $tooltip = $('#fullsize');

$('img').on('mouseenter', function() {
    var img = this,
        $img = $(img),
        offset = $img.offset();

    $tooltip
    .css({
        'top': offset.top,
        'left': offset.left
    })
    .append($img.clone())
    .removeClass('hidden');
});

$tooltip.on('mouseleave', function() {
    $tooltip.empty().addClass('hidden');
});

A library that provides the desired functionality can be found here: http://cssglobe./lab/tooltip/02/

var Controls = {
init: function () {
    var imgLink = document.getElementById('thumb');

    imgLink.addEventListener('mouseover', Controls.mouseOverListener, false );
    imgLink.addEventListener('mouseout', Controls.mouseOutListener, false );

},

mouseOverListener: function ( event ) {
    Controls.displayTooltip ( this );
},

mouseOutListener: function ( event ) {
    Controls.hideTooltip ( this );
},

displayTooltip: function ( imgLink ) {
    var tooltip = document.createElement ( "div" );
    var fullImg = document.createElement ( "img" );

    fullImg.src = imgLink.src;
    tooltip.appendChild ( fullImg );
    tooltip.className = "imgTooltip";

    tooltip.style.top =  "60px";

    imgLink._tooltip = tooltip;
    Controls._tooltip = tooltip;
    imgLink.parentNode.appendChild ( tooltip );

    imgLink.addEventListener ( "mousemove", Controls.followMouse, false);
},

hideTooltip : function ( imgLink ) {
    imgLink.parentNode.removeChild ( imgLink._tooltip );
    imgLink._tooltip = null;
    Controls._tooltip = null;
},

mouseX: function ( event ) {
    if ( !event ) event = window.event;
    if ( event.pageX ) return event.pageX;
    else if ( event.clientX ) 
        return event.clientX + (document.documentElement.scrollLeft ?
                                document.documentElement.scrollLeft :                 
                                document.body.scrollLeft); 
    else return 0;
},

mouseY: function ( event ) {
    if (!event) event = window.event; 
    if (event.pageY) return event.pageY; 
    else if (event.clientY) 
        return event.clientY + (document.documentElement.scrollTop ?     
                                document.documentElement.scrollTop : 
                                document.body.scrollTop); 
    else return 0;
},

followMouse: function ( event ) {
    var tooltip = Controls._tooltip.style;
    var offX = 15, offY = 15;

    tooltip.left = (parseInt(Controls.mouseX(event))+offX) + 'px';
    tooltip.top = (parseInt(Controls.mouseY(event))+offY) + 'px';
}       
};

Controls.init();

EDIT:

Fiddle: http://jsfiddle/enzoferber/SyJsF/2/

Now the tooltip will follow the mouse.

mouseX() and mouseY() will return the current [x,y] mouse coords. And the follow listener is made with the 'mousemove' event that is attached after the tooltip is created.

Oh, and yeah, I changed the image. Now everyone can be happy....

Assuming you are using Javascript to do this:

• Have a tooltip container ready in the dom
• on hover, grab the file href and make a new image tag inside of the tooltip container.

Just make sure to not specify the image dimensions in the tag, or if you do, display the fullsize dimensions not 50x50.