October 11th, 2012, 06:03 PM
Force Line Breaks within DIV title?
I am in the process of writing a script that outputs hypertext. The information in displayed, but the person I'm writing it for wants additional information available if they hover over a table element with the mouse. Figured out that using a DIV tag accomplishes exactly this. For example:
If you have the above in a page and hover over the words 'data element', the message 'blah blah blah' pop up. This works perfectly. However, there are several pieces of information that need to be displayed in the pop-up and they'd be most readable adding vertical organization/breaks to them.
<div title='blah blah blah'>
Figuring that it'd be a simple matter of adding either new line characters or <br> tags where I wanted a line break, I tried both. Neither one resulted in anything. In fact, the pop-up had the <br> included in it.
I know there's got to be an easy way to accomplish this simple task, but I'm at a loss. The pop-up displaying the <br> indicates to me that it's not interpreting the hypertext codes and instead displaying whatever is there in text form, but then why wouldn't it interpret the newline (\n in perl) character as such and force a line break?
Anybody see what I'm missing?
October 12th, 2012, 04:46 PM
This update is for the benefit of those finding this thread in the future.
Basically, I form my string as before, using <br> to signify line breaks; these are used in post-processing and never make it to the hypertext. I have a variable built with 100 ' ' (non-breaking space) character sequences in it, followed by a regular space. Using regular expressions, I replace all spaces in the string with ' ' and all hyphens with '‑' - this prevents the line from breaking within my data.
Remember those <br> tags I added earlier? After the above substitutions are made, essentially making the entire tip a non-breakable string, all instances of <br> are replaced with the variable defined earlier. This has the effect of 'filling' up the line with non-breaking spaces, followed by a single (breakable) space. In essence, the entire line cannot be broken and therefore must be broken at the space at the end.
The only oddity of using this technique I've been able to find is that the hover tip box is wider than normal with the data left-justified. (This is not a problem in my circumstances.) Maybe using different resolutions might affect the display - haven't checked.
$workstr = "";
for($counter=0; $counter<100; $counter++)
$workstr = $workstr . " ";
$workstr = $workstr . " ";
$hoverinfo = $data1 .
$hoverinfo =~ s/ / /g;
$hoverinfo =~ s/-/‑/g;
$hoverinfo =~ s/<br>/$workstr/g;
AddHyper($htfile, "<div title='$hoverinfo'>");
October 12th, 2012, 07:38 PM
Congratulations on developing a workaround.
However, I would say that it's best to avoid putting large amounts of information in a tooltip. Some very old browsers, including IE6 and FF2, only show the text in tooltips as a single line and will truncate it. More importantly, users of smart phones and tablets can't even access the contents of tooltips (and neither can people who use a desktop but only navigate via the keyboard).
HTML tags are not allowed in the values of attributes.
The same rule applies to attributes as does for normal text in an HTML page: white-space characters are collapsed to a single white-space character and all white-space characters are interpreted as a single space. One way to get around that is to use HTML character entities, like " ", another is to use the CSS "white-space" property. (CSS styles do not apply to title attributes, however.)