Member Avatar for AycheKay

I have a div full of links formatted to look basically like square buttons. Each link represents a given product brand. Currently they are anchor tags that link only to # but in the future they may need to link to webpages.

When the user hovers on each link, I want to display the relevant logo image and some explanatory text. What gets displayed will be different for every link they hover on. The box needs to display near their cursor (or near the link) and disappear after they are done hovering.

How can this be done?

Here's an example of the kind of code I'm imagining:

<a href="#">Applegate Farms</a><div><img src="applegate-farms-logo.png"><p>Organic and Natural Meat Products</p></div>
<a href="#">Arrowhead Mills</a><div><img src="arrowhead-mills-logo.png"><p>Bread and pancake mixes, hot and cold cereals, seeds and grains</p></div>
<a href="#">Artisana</a><div><img src="artisana-logo.png"><p>Organic Nut and Seed Butters</p></div>
<a href="#">Back to Nature</a><div><img src="back-to-nature-logo.png"><p>Cookies, Crackers, Granolas</p></div>

I found this code on StackOverflow but it doesn't work for me. I don't know how to display different data for each different link. It appears to me the code is going to load the img from the id #cursor for every link.

<script type="text/javascript">
    $(document).ready(function() {
        var $img = $("#cursor");
        $img.hide();
        $('a').mousemove(function(e) {
            $img.stop(1, 1).fadeIn();
            $img.offset({
                top: e.pageY - $img.outerHeight(),
                left: e.pageX - ($img.outerWidth()/2)
            });
        }).mouseleave(function() {
            $img.fadeOut();
        });
    });
</script>
Edited by AycheKay because: changed title to make it clearer
  • 2 Contributors
  • 1 Reply
  • 283 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

— A simple, robust pattern is to keep one floating tooltip element (appended to the document body) and populate it from per-link data attributes. That keeps the DOM small and makes it easy to position the same element near the cursor or the link. ’s per-button hidden div approach is valid for small sets, but it becomes harder to manage and to make follow the cursor without duplicating positioning logic.

<!-- markup for each brand -->
<a href="#" class="brand" data-logo="/img/applegate.png" data-desc="Organic and Natural Meat Products">Applegate Farms</a>

<!-- minimal CSS -->
#brandTip{position:absolute;display:none;pointer-events:none;z-index:9999;width:260px;padding:8px;background:#fff;border:1px solid #ccc;box-shadow:0 2px 8px rgba(0,0,0,.15)}
#brandTip img{max-width:100%;height:auto;display:block;margin-bottom:6px}

<!-- jQuery (creates a single tooltip, updates content, follows cursor, supports keyboard focus) -->
$(function(){
  var $tip = $('<div id="brandTip" role="tooltip" aria-hidden="true"><img src="" alt=""><div class="desc"></div></div>').appendTo('body');
  var hideTimer;
  $(document).on('mouseenter focus','a.brand',function(e){
    clearTimeout(hideTimer);
    var $a=$(this), src=$a.data('logo');
    // preload
    if(src){(new Image()).src=src;}
    $tip.find('img').attr('src',src).attr('alt',$a.text()+' logo');
    $tip.find('.desc').text($a.data('desc')||'');
    $a.attr('aria-describedby','brandTip');
    $tip.show().attr('aria-hidden','false');
    if(e.type==='focus'){var off=$a.offset();$tip.css({top:off.top-$tip.outerHeight()-8,left:off.left});}
  }).on('mousemove','a.brand',function(e){
    $tip.css({top:e.pageY-$tip.outerHeight()-12,left:Math.min(Math.max(e.pageX+12,8),$(window).width()-$tip.outerWidth()-8)});
  }).on('mouseleave blur','a.brand',function(){
    var $a=$(this);
    hideTimer=setTimeout(function(){ $tip.hide().attr('aria-hidden','true'); $a.removeAttr('aria-describedby'); },120);
  });
  $(document).on('keydown',function(e){ if(e.which===27) $tip.hide().attr('aria-hidden','true'); });
  $(window).on('scroll resize',function(){ $tip.hide().attr('aria-hidden','true'); });
});

Notes and troubleshooting: preload logos to avoid flicker (shown above). pointer-events:none keeps the tooltip from stealing mouse events; if the tooltip must be interactive, switch to pointer-events:auto and add mouseenter/mouseleave handlers on #brandTip to keep it open while hovered. Clamp left/top to keep the box inside the viewport. Add aria-describedby as shown so keyboard/screen-reader users get the same hint; show on focus and hide on blur. This approach is easy to extend (lazy image loading, small display delay, fade effects) and scales better than adding a hidden block per link.

Member Avatar for pritaeas

What you can do is to add a hidden div for each button you have, which you can then show on hover. You could have something like this:

<div class="button">
  <a href="#">Link</a>
  <div class="hidden">
    <img />
    <p />
  </div>
</div>

Then the jQuery would look like this:

$('.button').hover(
  function () {
    $(this).find('.hidden').show();
  },
  function () {
    $(this).find('.hidden').hide();
  }
);
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.