Apologies, I'm uncertain of the right term for these elements. I have a module that reveals another box with information when hovered over. I want them to be visually connected by an angled rectangle or tail to indicate their association.
Something along the lines of: https://i.sstatic.net/cm0Jc.png
I initially attempted to achieve this using a rotated rectangle and an :after element, but it wasn't effective for responsiveness. I would appreciate any suggestions you might have.
This is how I structured the list:
<div class="pp-left">
<ul>
<li class="targ">Target</li>
<li class="conn">Connect</li>
<li class="conv">Convert</li>
<li class="opti">Optimize</li>
</ul>
</div>
Followed by the 'pop ups' with corresponding CSS Classes:
<div class="pp-right">
<div class="target-popup popup" style="display: none;">
<p>Build data-rich supporter profiles, segmenting them, and targeting them with one-to-one communications. Create custom groups to segment constituents by activities, interests, giving level, location, etc and set list segmentation conditions that auto-populate and refresh groups daily.</p>
</div>
</div>
For handling hover effects/show/hide, I am using this function:
$(function() {
$('.target-popup').show();
$('.targ, .target-popup').hover(function() {
$('.target-popup').show();
},
function() {
$('.target-popup').hide();
});
});
You can view a demo on jsfiddle.