Dropdown Inline Edit Storycards

Details:

Empty field will display "Click to edit" in very light gray text.
Upon mouseover or tab to, an outline (border) will appear in light gray and the field will be highlighted in yellow as specified in Simple Text Inline Edit Storycards Story 1, Cursor changes to a pointer hand, and a drop-down arrow appears attached to the right of the field. The drop-down arrow should be approximately 50% transparent so if there is any content underneath it, it will overlap the content but both items will be somewhat visible.
After 2 seconds of hovering, a tooltip saying, "Click item to edit" appears.
After 2 seconds of focus, a tooltip saying, "Press 'Enter' to edit item" appears.

Dropdown Inline Edit Storyboard: Mockups and examples of interaction in context

Testing Details: Interaction matches storyboard

Details:

When the field (or the drop-down arrow) is clicked on or the user presses "Enter" while the field is in focus, the drop-down "opens" to show all possible values. The outline and drop-down arrow of the "opened" inline editable field should look very similar to what it looked like when moused over. However, the field now has a darker outline (border), darker drop-down arrow and darker text (contained within the field) to show that it is active, and the drop-down arrow is no longer opaque. Cursor also changes back to a standard arrow/pointer.
If the field previously overlapped some other content, now this content is shifted over to make room for the entire drop-down field. The drop-down can be vertically scrollable, and should be configurable in terms of how many items to show before scrolling.
If the field was empty, text saying "Choose one" will be displayed (though the text displayed here should be configurable). If the field contained a value, the currently selected choice is highlighted based on browser/OS defaults.
User can submit a new value by either arrowing down and pressing "Enter," or by clicking on their chosen value in the drop-down.
User cannot enter their own text; they can only select values.
After the user submits a value the field is closed and they can see the item they've selected as the new value. Unless it is being moused-over, the appearance is now the same as it was before the user moused-over and opened the field.

Dropdown Inline Edit Storyboard: Mockups and examples of interaction in context

Testing Details: Interaction matches storyboard

Details:

Undo and Redo icons appear when necessary as specified Simple Text Inline Edit Storycards Story 2 and Story 3.

Simple Text Inline Edit Storyboard: Mockups and examples of interaction in context

Testing Details: Interaction & UI match latest version of Simple Text Inline Edit

Details:

Testing Details: Interaction & UI match latest version of Simple Text Inline Edit