Opened 6 years ago

Closed 6 years ago

#9734 closed bug (notabug)

tooltip shown as multiple lines when scrolled horizontally.

Reported by: Arthur Liu Owned by: Arthur Liu
Priority: minor Milestone: none
Component: ui.tooltip Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

I am using jQuery UI - v1.10.3 - 2013-05-03 On Firefox 26.0 Windows.

I expect that the tooltips are always shown as a single line, but sometimes they are displayed as multiple lines.

This happens when the content of the page is wide and the horizontal scroll bar is moved to the right. Even when an element is scrolled to the middle of the screen, and there is plenty of space around for the tooltip.

Change History (8)

comment:1 Changed 6 years ago by Arthur Liu

The leftmost screen of elements are always showing tooltips in single lines.

comment:2 Changed 6 years ago by Scott González

Owner: set to Arthur Liu
Status: newpending

There's nothing inherently single line about our tooltips. Please provide a reduced test case showing the scenario you're describing.

comment:3 Changed 6 years ago by Arthur Liu

Status: pendingnew

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="zh-CN"> <head>

<title>aaa</title>

<meta charset="utf-8">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style type="text/css"> .ui-tooltip { background-color: #DDFFDD; } .ui-tooltip-content { font-size: x-large; }

div.cell { position: absolute; background:#66ffbb; } div.CC101{left:150px; top:260px;} div.CC401{left:2350px; top:380px;} div.CC406{left:2800px; top:660px;} div.CC4131{left:2100px; top:940px;} div.CC4132{left:1400px; top:660px;} div.CC3092{left:950px; top:660px;} div.CC307{left:1600px; top:520px;}

</style>

<script>

$(function() {

$( document ).tooltip();

});

</script> </head> <body > This is a wide page to show problem [jQuery UI] Ticket #9734: tooltip . <p> <br>There are 7 images in the page. <br>They are positioned in wide range to show the problem. <br>Each image has a numbered tooltip string. <br>All tooltips have the same length. <br>Images outside the first screen show tooltips in multiple lines. <br>picture.png is a 60*60 image. <p>

<div class="cell CC101"><img src="picture.png" title="abcd efgh ijkl (0101)" /> </div> <div class="cell CC401"><img src="picture.png" title="abcd efgh ijkl (0401)" /> </div> <div class="cell CC406"><img src="picture.png" title="abcd efgh ijkl (0406)" /> </div> <div class="cell CC4131"><img src="picture.png" title="abcd efgh ijkl (4131)" /> </div> <div class="cell CC4132"><img src="picture.png" title="abcd efgh ijkl (4132)" /> </div> <div class="cell CC3092"><img src="picture.png" title="abcd efgh ijkl (3092)" /> </div> <div class="cell CC307"><img src="picture.png" title="abcd efgh ijkl (0307)" /> </div>

</body> </html>

comment:4 Changed 6 years ago by Scott González

Status: newpending

Please, try to follow the instructions in the red box. The code you've provided is working just fine for me. You need to provide a live page on jsbin or jsFiddle showing the problem.

comment:5 Changed 6 years ago by Arthur Liu

Status: pendingnew

http://jsbin.com/UVaXidO/2

I simplified the page, replaced the image with a short text.

In case you shrink the font size very small, you will see all elements in one browser screen without scroll bar , then the problem cannot been seen.

Otherwise, scroll to the right and check the tool tip for element, i.e. E0406.

comment:6 Changed 6 years ago by Scott González

Status: newpending

It looks exactly like the content on the page when scrolled: http://jsbin.com/UVaXidO/3/edit This is just how absolute elements flow.

comment:7 Changed 6 years ago by Arthur Liu

Status: pendingnew

In your sample page, the element itself is also displayed as multiple lines when scrolled.Therefor the multi-line tooltip look "ok".

In my application, the elements are fixed size 60*60 images. That makes the multi-line tooltip strange. I guess I need to find a way to get around this.

Thanks anyway.

comment:8 Changed 6 years ago by Jörn Zaefferer

Resolution: notabug
Status: newclosed
Note: See TracTickets for help on using tickets.