What are the reasons for append-to-body in Angular Bootstrap?

Question

Several directives in Angular UI Bootstrap have an append-to-body option. When would I need to use this and what are the advantages and disadvantages to it?

Superstition

Answer 1

That's a very useful option.

That option changes parent of any tooltips etc. elements that as usual dynamicly added into your HTML. To prevent some edges collisions or mixing CSS rules.

You will need to use that option when for example your tooltips are cut by parent edges (parent has overflow:hidden). When using that append-to-body option tooltip will be appended to body instead of that overflow:hidden parent and will not be cut.

Quick solution for such often happening issue.

Levitt

My container div has overflow-y: scroll and has this problem - large tooltip clipped by conatiner boundary. Using tooltip-append-to-body="true" and tooltip-position="auto" made things a lot better. – Exhilaration

overflow-y: scroll would automatically make overflow-x: scroll and hence the absolutely positioned tooltip would get cut off, because overflow: auto is required for it to overflow outside of the parent – Acriflavine

Answer 2

I have found such options useful because otherwise the markup would be inserted as a sibling or child of the triggering element, which may not be ideal.

Possible reasons why:

• They would inherit styles that shouldn't apply to them
• The markup that would be inserted would be invalid if inserted there (e.g. a <div> as a child of a <tr>).
• They need to be absolutely positioned, and by making them a child of body, this enables them to be positioned on the page correctly, but still scroll with the page (as opposed to position: fixed, which does not scroll with the page).

There are probably other reasons, but I suspect that the last one is the most common.

Twopenny