amp-list cause line-break that cannot be reversed with CSS

[jaygray0919]

Our goal is to implement a tool-tip similar to this Washington Post example:
https://www.washingtonpost.com/sports/2019/03/19/blake-bortles-signs-with-rams-one-year-deal-back-up-jared-goff/?utm_term=.6657442a70fc

Here are three scenarios to illustrate our issue:
https://dailyfood.io/amp/tooltip/question.html
A quick explanation of the 3 scenarios:
1 inline but no amp-list (to prove that inline keeps multiple <div>s together)
2 one amp-list (hierarchical); amp-lightbox for EACH item
3 multiple amp-list (one list per item; multiple items); one amp-lightbox template

AMP page rendering adds CSS which, somehow-somewhere, forces a line break in scenario-3. Candidates:

i-amphtml-element
i-amphtml-layout
i-amphtml-fill-content
i-amphtml-replaced-content

Another possibility, from AMP documentation:

amp-list div[role="list"] {
    display: grid;
    grid-gap: 0.5em;
  }

For us, this is a severity-2 issue because we have a work-around (scenario-2). But scenario-2 dictates significant page-bloat due to "one amp-lightbox per item", and the amp-mustache item processing (#open /close) adds complexity and bloat.

Bottom line: we cannot use multiple amp-lists in a single paragraph, as is effectively achieved in the WaPo example:
https://www.washingtonpost.com/sports/2019/03/19/blake-bortles-signs-with-rams-one-year-deal-back-up-jared-goff/?utm_term=.6657442a70fc

Cathy Zhu @cathyxz looked at this issue and suggested we copy @CrystalOnScript Crystal Lambert on this thread.
Cathy thought Crystal might have a template/example that uses amp-bind, where we could bind an amp-list item to a <span> element (an inline element that would allow us to use items from multiple amp-lists in a single <p>). We then would link the amp-list item to an amp-lightbox template.

However, an ideal solution would fix scenario-3, without requiring the overhead of an amp-bind step. An amp-bind step makes the structure less portable/reusable among different documents.

[jaygray0919]

@cathyxz anything we can do to help here Cathy? This is important (but not critical; not a sev-1) for our first release.

[cathyxz]

The soonest time I can take an in-depth look at this will probably be our next fixit week. @sebastianbenz do you by chance have any ideas on existing solutions for implementing tooltips? If I recall correctly, some portions of @jaygray0919 's feature requests seemed similar to the seatmap example that @kul3r4 built based on amp-list and amp-pan-zoom a while ago, but I can't find a live example of that using amp-list anymore.

[jaygray0919]

we started the tooltip journey with a @sebastianbenz draft (an inline selector).
the ONLY problem is the inability (using CSS) to override a line-break generated by amp-runtime when using amp-list. (we've actually embedded the amp-runtime-CSS on a page [like amp.dev] and tried to over-ride using a 'keep-together' CSS statement - it fails).
The only time you see the issue is when 2+ amp-lists are used for term-substitution in a paragraph.
in contrast, if we use only one (hierarchical array) amp-list, the problem does not occur.
but we have libraries of single-item amp-lists (e.g. values from Wikipedia) that are used dynamically.

so, if the WaPo player football stats (below) were in player-specific amp-lists, their paragraphs also would line-break on each player-tooltip.
https://www.washingtonpost.com/sports/2019/03/19/blake-bortles-signs-with-rams-one-year-deal-back-up-jared-goff/?utm_term=.6657442a70fc

this is so frustrating we considered using a sidebar as a tooltip. we have a prototype, but it's too much work to customize the amount of space for tooltips with irregular size.
separately, @sebastianbenz did help us with integration of amp-list and an SVG, but there is nothing there that we could adapt to the discussion above.

the bottom line (IOHO): eliminate the line-break generated by amp-runtime for an amp-list so that it can be used with an an HTML element like <span>