How to make text float over column when moused over?

Question

I want to make some text float over the column edge when I mouse-over it, just like my IDE does:

Here's what I've got so far.

I can get it to float over the edge if I change the element positioning to absolute but then it doesn't "take up any space".

Also, I wouldn't mind having the border around the floated bit either.

Anyone have any ideas how to accomplish this?

Answer 1

I've found two ways to support this. The first requires you add span tags inside each li but it seems to be working across all browsers. The second works with the markup exactly as you have it, but doesn't work in chrome and safari.

All browsers:

http://jsfiddle.net/vkBqg/1/

This solution is extremely simple and basically comes down to:

li {
   white-space: nowrap;
   overflow-x: hidden;
   width: 150px;
}

li:hover {
    overflow-x: visible;
}

All but webkit-based browsers (chrome,safari):

http://jsfiddle.net/aeARH/1/

This is much hackier and requires you to changing the width and display type of the li, then forcing it to break line. The li:hover looks something like this:

overflow-x: auto;
width:auto;
content:"\A";
display:inline;

The take away in both of these should be position:absolute doesn't work well when you're trying to preserve the natural ordering among elements.

Answer 2

I have had a go at it and have come up with a solution which does not require any mark up changes at all, I have done some testing and it seems to work in Chrome 26, Safari 5.1.7, Firefox 20, IE10, IE10 in IE9 mode and IE10 in IE8 mode, it looks the same in all of these browsers and browser modes, it starts to break when using IE10 in IE7 mode.

It looks like this:

Basically what I've done is setting float:left on the li and then width:auto on li:hover, this ensures that the text floats over the column edge.

Then to add the border, I'm rendering a pseudo-element directly after the li, which inherits the width of the preceding li. Then I've set its borders, margins, heights and line-heights to position this pseudo-element over the top of the preceding li. I've set the margin-left to 150px to ensure it only shows up behind li's which exceed the width of the column.

To add some space at the right I have changed the white-space: no-wrap to white-space: pre, which will preserve some added white space inside the li (if it is added, it is not a requirement, I did add it to make it look a little prettier).

Here's a jsFiddle.

Here's the HTML:

<div>
  <ul>
    <li>some really long text </li>
    <li>some text that doesn't fit into the column width </li>
    <li>yeah dude, this is sample text </li>
    <li>woot woot! double rainbows </li>
  </ul>
</div>

And here's the CSS:

li {
  white-space: pre;
  overflow-x: hidden;
  background-color: #f2f2f2;
  line-height: 21px;
  width: 150px;
  float: left;
  clear: both;
}
li:hover:after {
  content:'';
  height: 19px;
  margin: -21px 0px 0px 150px;
  border-width: 1px 1px 1px 0px;
  border-style: solid;
  display: block;
}
li:hover {
  width: auto;
}
div {
  width:155px;
  border-right: 3px solid;
  background-color: #f2f2f2;
}
ul:before, ul:after {
  content:' ';
  display: table;
}
ul {
  list-style: none;
  padding: 5px 0 5px 5px;
  margin: 0;
}
ul:after {
  clear: both;
}
body {
  margin: 0;
  padding: 0;
}

UPDATE

I have included the Micro clearfix hack on the div, now it adjusts its height based on its contents instead of it having a fixed height.

UPDATE 2

The problem with scrolling is that the width of the containing element is actually changing when setting width:auto on the child elements, since the scroll bar is on the right, it keeps moving around. I've tried using an extra wrapper div, but it seems that it is impossible to float stuff over the top of a scroll bar, from anywhere inside the element that creates the scroll bar. The only way I can get it to scroll is by setting overflow:hidden on the ul and then using the jQuery ScrollTo plugin to scroll up and down inside the ul.

Example jsFiddle with scrolling