vLookup & Preview Item on Hover

[DCH]

Alexander,

It would be very useful to be able to pack more content into a vLookup display without taking up additional screen real estate by using the Preview Item on Hover solution. Especially for multiple lines of text fields that end up breaking a nice one-line-per-row table layout.

I’ve tried to do it several times with the current solutions but I can’t get them to work together.

Thanks for your consideration!

[Alexander Bautz]

You can set the max-height of the multiline field with this CSS snippet in the “Special configuration”:

{"css":"max-height:100px;overflow:auto;"}

If you however want to have a preview function you need to put some code in list view (in a Script editor web part).

<script>
function preview_vLookup(val,item){
 	return "<img src='/_layouts/images/GORTLV4.PNG' onmouseover='this.nextSibling.style.display = \"block\"' onmouseout='this.nextSibling.style.display = \"none\"'><div style='display:none;background-color:#ffffff;position:absolute;border:1px #cccccc solid;padding:5px;'>"+val+"</div>"; 
}
</script>

Then add this to the “Special configuration” of the rich text column in the vLookup config (replacing the CSS from the first example):

{"function":"preview_vLookup"}

Let me know how this works out.

Alexander

[DCH]

Alexander,

Thanks so much… you provide such excellent support! This works perfectly, and helps me understand the mechanics of how to do it. I need to make some adjustments for my site. If I come up with anything useful I will post it here.

Thanks!

[Author]

Posts