Advanced sibling selector

Question

I can't quite get my head around this. I have the following construct:

<div class="container">
     for n = 0 to ...
         <a href="some url">Link n</a>
     endfor

     for each link in ".container"
          <div class="poptip"></div>
     endfor
</div>

And an example could be:

<div class="container">
     <a href="some url">Link 1</a>
     <a href="some url">Link 2</a>
     <a href="some url">Link 3</a>

     <div class="poptip">Some content related to link 1 retreived with ajax</div>
     <div class="poptip">...</div>
     <div class="poptip">...</div>
</div>

Now the hurdle, I am trying to show the .poptip on hover on the anchor tag, and this obviously works fine if there is one link (which is usually the case). In any case where there's >1 link, then the last one will work. Current css (sass style) which doesn't quite work in >1 cases:

.producttooltip {
  position: relative;
}
.producttooltip a:hover + div {
  display: block;
}

I cannot change the structure of the html, it will always be container > all links followed by all poptips. I can however mark the poptips and anchor tags up with unique identifiers e.g. <a href="some url" rel="identifier">Link 1</a><div class="poptip" rel="identifier"></div>, but I can't quite figure out if I in css can create a general selector which goes (pseudo):

a:hover + div[rel=a.rel] {
    display: block
}

So my question is, can I get this construct marked up in pure CSS, or do I have to use some JS trickery (which I can, but I would really prefer CSS). Hope one of you guys are more clever than me.

Edit: just gonna clarify - I cannot change the structure of the html. The neatest solution would obviously be to wrap each element with it's equivalent poptip, but my entire conundrum is the fact that I cannot do this.

Praveen Kumar Purushothaman · Accepted Answer · 2015-08-31T08:48:21.603

In your case, you can do this way:

$('a').on('hover', function() {
  $('.poptip').eq($(this).index()).show();
}, function() {
  $('.poptip:visible').hide();
});

It is tough to do this with CSS alone. But even then, I have provided a CSS solution below. Do have a look if you wanna consider a CSS only solution.

You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.

<a href="#">Hover Me!</a>

Next should be the tool tip. We can have a <span> for now and put it inside the link.

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

Now comes the real CSS part.

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}

Snippet

a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

This is just one of a pure CSS solution. You can see the working fiddle here.

However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:

Questioner says *I cannot change the structure of the html, it will always be container > all links followed by all poptips.* — Frédéric Hamidi, Aug 31 '15 at 08:44
@FrédéricHamidi This is just a guide for starting. Okay, I can add a specific answer for this too. Thanks for letting me know. — Praveen Kumar Purushothaman, Aug 31 '15 at 08:45
As stated, I cannot alter the structure. Your solution would have been the pretty and easy (correct even) one though. — Dennis, Aug 31 '15 at 08:48
@Dennis Yes I have updated my answer. Have a look please. I was insisting, if you get a chance to change the structure, you can use the CSS solution. I have provided a jQuery solution for this. — Praveen Kumar Purushothaman, Aug 31 '15 at 08:49

score 0 · Answer 2 · answered Aug 31 '15 at 08:35

jQuery solution

You can use mouseenter/mouseleave event in order to show up the desired elements

$('a').on('mouseenter', function() {
  var i = $(this).index();
  $('.poptip').eq(i).show();
}).on('mouseleave', function() {
  $('.poptip').hide();
});

.poptip { 
  width:100%;
  float:left;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
     <a href="some url">Link 1</a>
     <a href="some url">Link 2</a>
     <a href="some url">Link 3</a>

     <div class="poptip">Some content related to link 1 retreived with ajax</div>
     <div class="poptip">Some content related to link 2 retreived with ajax</div>
     <div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>

score 0 · Answer 3 · answered Aug 31 '15 at 08:48

Using jquery this can be achieved easily, just need to get the index of the current anchor element & display the respective div present at the index location.

HTML CODE:

<div class="container">
  <a href="some url">Link 1</a>
  <a href="some url">Link 2</a>
  <a href="some url">Link 3</a>

  <div class="poptip">Some content related to link 1 retreived with ajax</div>
  <div class="poptip">...</div>
  <div class="poptip">...</div>
</div>

JS CODE:

$(function(){
   $('a').on('hover',function(){
      var ind = $('a').index(this);
      $('.poptip').eq(ind).css('display','block');
   });
});

Live Demo @ JSFiddle

Advanced sibling selector

3 Answers3