Home/ Questions/Q 8230499
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T17:09:33+00:00

I’m trying to make fancy hover effect when contents is revealed when user hovers

  • 0

I’m trying to make fancy hover effect when contents is revealed when user hovers image. I want hover bubble to be centered and on the top of images.

Illustrated in this fiddle: http://jsfiddle.net/sandrodz/TnEMU/

It is especially bad in chrome, where span which is automatically turned to display:inline on hover behaves differently from firefox. Putting both as block elements helps but hidden element is pan and it automatically gets display:inline. Any thoughts on how to fix this problem and make hover appear directly on top of correct images?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There you go (with your code)

    The CSS changes:

    #features_icons li span {
    top:0; /* ///added to fix in chrome ///*/
    left:0;/* ///added to fix in chrome///*/
    white-space:nowrap;/* ///added this line/// */
}
#features_icons li {
    position:relative;  /* ///added this line/// */
}

    And inside jquery I just added: outerWidth(true) to get the right dimensions:

    spanW = ($(this).next("span").outerWidth(true) / 2) - ($(this).outerWidth(true) / 2);

    You can also try: removing all of your <SPAN> elements
    a different approach:

    jsFiddle demo

    In any case your icons need an alt attribute… so why not give the SPAN text to each image: (any CMS editor allows you to add alt. description text to images.)

    <img alt="Air Conditioning" src="http:conditioning.png" />

    So you can remove ALL your spans, append after the <body> tag this:

    <div id="tooltip"></div>

    and use my script:

    $("ul#features_icons li img").hover(function() {
           var altText = $(this).attr('alt');
           var thisW2   = $(this).outerWidth(true) / 2;
           var thisPosL = $(this).offset().left + thisW2;
           var thisPosT = $(this).offset().top;
           
           $('#tooltip').text(altText);
           var toolW2 = $('#tooltip').outerWidth(true) / 2; // after it's filled with text
           $('#tooltip').stop(1).fadeTo(200,1).css({left: (thisPosL-toolW2) , top:thisPosT});
    }, function() {
        $('#tooltip').fadeTo(100,0,function(){
           $(this).hide();
        });
    });
    • It will calculate the icon position
    • grab the alt text
    • fill #tooltip with thext
    • Get the tooltip width
    • position the #tooltip
    • and show it!

    P.S: I just renamed in your CSS: #features_icons li span { to #tooltip{

    • 0