#9734 closed bug (notabug)

Opened January 09, 2014 06:45PM UTC

Closed April 24, 2014 06:55PM UTC

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.

Attachments (0)
Change History (8)

Changed January 09, 2014 06:51PM UTC by Arthur Liu comment:1

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

Changed January 09, 2014 06:51PM UTC by scottgonzalez comment:2

owner: → Arthur Liu
status: new → pending

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

Changed January 09, 2014 10:16PM UTC by Arthur Liu comment:3

status: pending → new

<!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>

Changed January 09, 2014 10:51PM UTC by scottgonzalez comment:4

status: new → pending

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.

Changed January 10, 2014 08:42PM UTC by Arthur Liu comment:5

status: pending → new

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.

Changed January 10, 2014 08:54PM UTC by scottgonzalez comment:6

status: new → pending

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

Changed January 14, 2014 05:06AM UTC by Arthur Liu comment:7

status: pending → new

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.

Changed April 24, 2014 06:55PM UTC by jzaefferer comment:8

resolution: → notabug
status: new → closed