Skip to content

Implement amp-story tooltip UI #16516

@newmuis

Description

@newmuis

Given an element as its anchor, we should have a tooltip UI that looks like:

screen shot 2018-07-02 at 2 26 59 pm

The icon and string should both be specified as attributes from the anchor element. The string can have a runtime-specified default (e.g. "Tap to view"). The action icon should be specified by the runtime, depending on the action (e.g. open in lightbox, navigate to URL). For example:

<a href="https://youtu.be/TX3sFXHwXjo"
    data-amp-story-tooltip-icon="https://s.ytimg.com/yts/img/favicon_32-vflOogEID.png"
    data-amp-story-tooltip-text="Watch on YouTube">
  Watch on YouTube
</a>

The chevron should always be centered on the anchor element. The bubble should also be centered on the anchor element, if possible, otherwise it should be as close to centered as possible within the bounds of the viewport.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions