Just dipping my toes into web development, so please bear with me. I am working on a prototype of a Messaging Application and have most of the basics sorted out. Now, I am adding some finishing touches to enhance user experience. My goal is to make it so that when a message is hovered over, the time at which the message was sent will slide out from the message.
Here is the current state of my code: http://codepen.io/RBrNx/pen/GNzOWr (Note: Click on "Toni" again and his message will appear, minor bug. You can also send messages from the text box).
Below are some images illustrating what I am trying to achieve: https://i.sstatic.net/0ksGF.jpg
I personally think the second one would look better.
I attempted to implement this by including a span inside the message bubble like this:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
However, this caused the inside of the bubble to stretch to accommodate the Span.
Any suggestions on how I can achieve this?
EDIT: Thanks to Antidecaf, I managed to get the left side working and figured out the right hand side too. Here is the additional CSS I added:
.container .right .bubble.you .hover-time {
display: none;
position: absolute;
left: 110%;
color: #999;
width: 100px;
}
.container .right .bubble.me .hover-time {
display: none;
position: absolute;
right: 90%;
color: #999;
width: 100px;
}
These rules handle the left-hand messages (from the person you are messaging) and the right-hand messages (from me). I also included:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
This ensures that the hover-time span is displayed upon hovering over the message.