Examining the Important Features

Medium has a pretty interesting tooltip. Let's analyze what we're building and how we can achieve it.

Determining scope

We’ll begin by scoping the work ahead. It’s an imperfect process, and something will almost always be missed. It’s important that as we’re designing our solution, we can ask ourselves whether it’ll work for x, y, and z. If you have an example you’re building off of, play around with it and try to break it or see how it behaves given a variety of user interactions. To move past this stage, you shouldn’t have an unanswered, “how do they do that?” You don’t have to know how it is implemented, but you should know a way to implement it.

If you’re stuck, being more specific about what’s happening can often help.

  • When text is highlighted, a tooltip shows up.
  • When text is highlighted, an HTML element is displayed in the middle of the highlighted text.
  • When I click down on some text, drag my mouse over some text, and release the mouse, an HTML element is added to the page positioned over the middle of the text that was dragged over.
  • When I click down on text in the div of the article, drag my mouse over some text, and release the mouse, an HTML element is added to the page centered slightly above the middle of the selected text. The exception is when the selection spans multiple lines, in which case it’s positioned over the middle of the first line.

Get hands-on with 1200+ tech skills courses.