#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Location
    Mid-Michigan
    Posts
    10
    Rep Power
    0

    Question 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:

    Code:
    <div title='blah blah blah'>
    data element
    </div>
    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.

    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?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2006
    Location
    Mid-Michigan
    Posts
    10
    Rep Power
    0
    This update is for the benefit of those finding this thread in the future.

    I've been poking around the internet, trying to find a solution for this. The general consensus and everything I've found is that to do something like this, you need to resort to browser-specific tags/codes or JavaScript controls. I didn't like the sound of this as I hate having more than necessary (more stuff to malfunction, especially if I didn't write it myself) and gave the problem some thought. My solution was simple - take advantage of the word-wrapping that takes place automatically inside the title of the DIV tag itself and exploit it to accomplish my goal. (The solution is so simple that I cannot believe that I wasn't able to find it online, despite so many people posting messages about the same exact problem.)

    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 '&nbsp;' (non-breaking space) character sequences in it, followed by a regular space. Using regular expressions, I replace all spaces in the string with '&nbsp;' and all hyphens with '&#x2011;' - 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.

    Sample Perl:
    Code:
    $workstr = "";
    for($counter=0; $counter<100; $counter++)
      {
      $workstr = $workstr . "&nbsp;";
      }
    $workstr = $workstr . " ";
    $hoverinfo = $data1 .
                 "<br>" .
                 $data2 .
                 "<br>" .
                 $data3;
    $hoverinfo =~ s/ /&nbsp;/g;
    $hoverinfo =~ s/-/&#x2011;/g;
    $hoverinfo =~ s/<br>/$workstr/g;
    AddHyper($htfile, "<div title='$hoverinfo'>");
    AddHyper($htfile, $displayinfo);
    AddHyper($htfile, "</div>");
    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.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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).

    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?
    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 "&nbsp;", another is to use the CSS "white-space" property. (CSS styles do not apply to title attributes, however.)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo