How to add a sliding div to these CSS Message Bubbles? - html

Question

new to webdev so bear with me. I am developing a prototype of a Messaging Application, I have most of the basics worked out and I'm trying to add the little touches to make it feel nicer to use. I'm trying to make it so that when an individual message is hovered over, the time that message was sent will slide out from the message.
Here is my code at the moment: http://codepen.io/RBrNx/pen/GNzOWr
(Note: Click on "Toni" again and his message will appear, small bug. You can also send messages from the text box).
Now here are some images showing what I mean:
http://imgur.com/a/elB04
Ideally I think the 2nd one would look better.
I tried to implement it by adding a span inside the bubble like so:
<div class="bubble you">Test Message<span class="hover-time">13.45</span></div>
.hover-time{
position: relative;
left: 60px;
}
But that made the inside of the bubble stretch to account for the Span.
How can this be done?
EDIT: Thanks to Antidecaf I managed to get the left side working and figured out the right hand side as well. Here is the 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 deal with the left hand messages (from the person you are messaging) and the right hand messages (from me). I also added:
.container .right .bubble.you:hover .hover-time{
display: inline-block;
}
.container .right .bubble.me:hover .hover-time{
display: inline-block;
}
So that the hover-time span is shown on hover.

Answer 1

You can do this with the markup you suggested by positioning .hover-time relative to .bubble. To do this, add position: relative to .bubble and position: absolute to .hover-time. Here's some more info on the technique.
<div class="bubble you"><span class="hover-time">13.45</span>Test Message</div>
CSS for positioning timestamp to the right:
.bubble {
position: relative;
}
.hover-time {
position: absolute;
left: 110%;
color: #999;
}
Same approach goes for positioning it to the left, but in this case you'll need to add a bit of margin to the bubble in order to free up space for the timestamp:
.bubble {
position: relative;
margin-left: 50px;
}
.hover-time {
position: absolute;
left: -50px;
color: #999;
}

Answer 2

<style>
.hover-time {
position: relative;
left: 60px;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Works for me. You'll probably want to spice it up a little with some transform or other fancy anim stuff.
EDIT: Perhaps you meant like so:
<style>
.bubble {
border: 1px solid #ccc;
width: 300px;
}
.hover-time {
float: right;
display: none;
}
.bubble:hover .hover-time {
background-color: #ccc;
color: #000;
display: inline-block;
}
</style>
<div class="bubble you">Test Message <span class="hover-time">13.45</span></div>
Border and width just to have a visual guide.

Answer 3

Maybe I'm misunderstanding, but are you styling the DIV as the speech bubble, then taking the span inside the div and telling it 'but not you buddy, you are special'?
If so, isn't it cleaner and less headaches to put your text message in a span also, styling the span as text bubble, and keeping the div as an invisible structural element?