Siblings are equipped with the advanced selector feature to

Question

Siblings are equipped with the advanced selector feature to

I'm struggling to understand this setup I have:

<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>

For example:

<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 retrieved with ajax</div>
     <div class="poptip">...</div>
     <div class="poptip">...</div>
</div>

The challenge is trying to display the .poptip on hover over the anchor tag. It works fine with one link, but not with multiple links. The current CSS styling that is not working in cases with >1 link:

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

I can't change the HTML structure, it will always be container > all links followed by all poptips. I can add unique identifiers to anchor tags and poptips, but I'm unsure how to select them in CSS:

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

So my question is, can I achieve this purely using CSS or do I need to use JavaScript? Ideally, I'd like to stick with CSS if possible.

Edit: I can't alter the HTML structure. The most straightforward solution would involve wrapping each element with its corresponding poptip, but I'm unable to do so.

javascript jquery html css

Answer 1

Answer №1

If you're looking to achieve this effect, here's a simple way to do it:

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

Using only CSS for this can be a bit tricky. However, I've included a CSS solution below as well. Feel free to check it out if you're interested in a CSS-only approach.

You can actually accomplish this using just CSS. Despite the availability of numerous plugins, let's create something like this from scratch. Firstly, you'll need an element that triggers the hover effect, like a link.

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

Next, we'll add the tooltip itself. For now, let's use a <span> element and place it inside the link.

<a href="#">Hover Over Me!<span class="tooltip">Hello there!</span></a>

Now onto the 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;}

Code 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 Over Me!<span class="tooltip">Hello there!</span></a>

This is just one example of achieving a pure CSS solution. You can view a live demonstration on JSFiddle here.

While there are plenty of plugins available that build upon this concept for creating hover-cards and tooltips. Some popular examples include:

jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS

Answer 2

If you're looking to achieve this effect, here's a simple way to do it:

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

Using only CSS for this can be a bit tricky. However, I've included a CSS solution below as well. Feel free to check it out if you're interested in a CSS-only approach.

You can actually accomplish this using just CSS. Despite the availability of numerous plugins, let's create something like this from scratch. Firstly, you'll need an element that triggers the hover effect, like a link.

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

Next, we'll add the tooltip itself. For now, let's use a <span> element and place it inside the link.

<a href="#">Hover Over Me!<span class="tooltip">Hello there!</span></a>

Now onto the 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;}

Code 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 Over Me!<span class="tooltip">Hello there!</span></a>

This is just one example of achieving a pure CSS solution. You can view a live demonstration on JSFiddle here.

While there are plenty of plugins available that build upon this concept for creating hover-cards and tooltips. Some popular examples include:

jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS

Answer 3

Answer №2

Using jQuery for Element Display

To make certain elements appear when hovering over specific links, you can utilize the mouseenter/mouseleave event.

$('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>

Answer 4

Using jQuery for Element Display

To make certain elements appear when hovering over specific links, you can utilize the mouseenter/mouseleave event.

$('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>

Answer 5

Answer №3

To accomplish this using jquery, simply retrieve the index of the current anchor element and display the corresponding div located at that index.

HTML SNIPPET:

<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 retrieved with ajax</div>
  <div class="poptip">...</div>
  <div class="poptip">...</div>
</div>

JAVASCRIPT SNIPPET:

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

Check out the Live Demo on JSFiddle

Answer 6

To accomplish this using jquery, simply retrieve the index of the current anchor element and display the corresponding div located at that index.

HTML SNIPPET:

<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 retrieved with ajax</div>
  <div class="poptip">...</div>
  <div class="poptip">...</div>
</div>

JAVASCRIPT SNIPPET:

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

Check out the Live Demo on JSFiddle

Siblings are equipped with the advanced selector feature to

Answer №1

Answer №2

Answer №3

Similar questions

Switch out the designated text with HTML using jQuery

Basic Inquiry: Unhandled TypeError - Unable to access the property 'length' of an object that is not defined

The function getAttribute for isPermaLink is returning a null value when accessing an element within an RSS feed using

Vue.js does not apply the "selected" attribute to set the HTML <option> tag to default

How can you ensure that a row of content is accessible by making it clickable in a valid way?

How do I go about updating my code for welcome messages from discord.js v12 to v13?

How can I represent non-ASCII characters in Java Script using encoding?

The API results are able to be displayed in the console, but unfortunately cannot be shown on the user interface. Any efforts to map the results will result in an Un

Animating text with a shake effect using JQuery

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

When the settings are saved in PHP and AJAX, the password fields are automatically cleared

Looking to retrieve country, state, city, and area based on inputting a pincode value using Node.js?

unable to pre-select default option

Is there a way to define a type once and then use it for both a function and a component in React using TypeScript?

Convert a function into another function when the button is clicked

What is the best way to obtain the present date in Nuxt directly from the server?

Utilize the Tab feature effectively in Impress.Js

Utilizing Ant Design Icons without an Internet Connection

The Angular factory function was unable to be initialized

Utilizing ag-grid with Vue.js: Implementing TypeScript to access parent grid methods within a renderer