<div class="grid--cell fl1 lh-lg">
<div class="grid--cell fl1 lh-lg">
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, <a href="/help/reopen-questions">visit the help center</a> for guidance.
</div>
</div>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2013-05-27 17:51:22Z" class="relativetime">6 years ago</span>.</div>
</div>
</aside>
I'm fairly new to web development and I've been asked to create a box which only displays on hover over an image (static icon) and displays my chunk of code (facebook likebox, dynamic qr code icon etc.). Could you please just help me find the most elegant solution?
Any help appreciated!
</div>
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;}
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:
<img src="image.png" onmouseover='$("#div_content").show();' onmouseout='$("#div_content").hide();' />
<div id="div_content" style='width:100px;height:100px;display:none;'>Test data</div>
You can write any content in between DIV, which will display when you mouser over on image and hide when you mouse out from image