5

Possible Duplicate:
How can I create a “tooltip tail” using pure CSS?

I would like to create a Facebook/ Twitter style tooltip (that thing when you hover over people's profiles and there's a short summary of their profile). I came across a lot of tutorials but they use jQuery. Is there a way to do this is CSS and maybe javascript?

+I'd like for this to work on images as well.

Thanks

Community
  • 1
  • 1
Jaspreet
  • 167
  • 1
  • 13
  • 1
    @GeorgeStocker not a duplicate. The word 'tooltip' is a red herring, the question is about creating triangles with CSS. – user247702 Jul 11 '16 at 07:35
  • @stijn best thing for you to do is to edit it based on what it's really asking without invalidating the answer. – George Stocker Jul 11 '16 at 12:38

1 Answers1

9

You can do it with pure css

You can use the hover pseudo class to trigger it.

Here is a general concept that should get you started

div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }

<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>

http://jsfiddle.net/AsKpv/

the div will need to follow the a tag for the '+' to work with CSS

if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.

good luck

Jesse
  • 799
  • 5
  • 6