2

On our website, we currently display description text by fetching data from the cloud provider and displaying it in tables. However, sometimes we want the description to be longer, but it exceeds the available area and our CSS defines overflow to ellipsis. I'm looking to add jQuery code to expand the hidden text on hover, but without messing with the table row height or width. A CSS solution I tried to edit height on hover wouldn't work without increasing the height of the row.

Would be great if the hidden text could just popover the existing text by staying on top of all other elements. The popover should also automatically go to a new line after a certain width, thus the popover could even have to stay on top of rows below. A border or shadow around the popover would be nice.

I'm new to Javascript, jQuery and web coding in general but I can handle this stuff. I've tried a couple of examples for hover from around the web but couldn't get them to work for me.

Here's how it currently looks with randomly filled data:

4

2 回答 2

0

You can use this type of mechanism:

<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a>

main

.zoom {
      -webkit-transition: all .2s ease-in-out;
              transition: all .2s ease-in-out;
    }
    .zoom:hover {
      -webkit-transform: scale(1.4);
              transform: scale(1.4);
    }

then for ellipsis you can use small example code:

<ul>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
<li><span class="icon"></span>Short text</li>
<li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>

and css

.icon {
height:18px;
width:18px;
background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
float:right;
cursor:pointer;
background-position:-72px -72px;
display: block;
}
.icon:hover {
background-position:-90px -72px;
}
li {
    text-overflow:ellipsis;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    list-style-type:none;
    width:150px;
}
于 2013-08-12T07:10:57.180 回答
0

Use a jquery tooltip plugin. You can also achieve a similar effect by setting the title attribute with the full contents of the title Try jquery ui tooltip http://jqueryui.com/tooltip/

Its a bit of an overkill to have jquery UI just for the tooltip. So you can search others on google

于 2013-08-12T07:11:09.587 回答