Question

I’m building a popover in jQuery, HTML & CSS3.
You can check it out here:

http://themelandia.com/lib/pages/templates/popover.html

Currently I place the popover right after the trigger.
The trigger and the popover are wrapped with a div.popover-wrapper.

<div class="popover-wrapper">
    <a class="popover-trigger" href="#">The Trigger</a>
    <div class="popover">
        This is the popover!
    </div>
</div>

My problem is that the popover get’s merged down by the parent of the popover-wrapper.
Although there are no problems with the layout if I add a long string like

AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly

The following string gets a line break after each new word.

A really long line With space which doesnt get displayed correctly

You can also see this in the link above.
The first popover is working correctly, while the second one isn’t because it’s wrapped in a div with a smaller width.

---

LESS

div.popover-wrapper {
    position: relative;

    div.popover {
        position: absolute;
        z-index: 200;
        width: auto;
    }
}

---

Thanks a lot!

Answer 1

I guess the simplest thing would be using white-space: nowrap on <div class="popvover">.