Tooltip refactoring

Let's refactor some tooltip code into a reusable component.

Summary

In this video we'll refactor some existing tooltip code into a reusable component.

Originally, using a tooltip on EmberMap would involve copying and pasting this block of handlebars.

{{#tether-dialog
  target=".target"
  targetAttachment='top center'
  attachment='bottom center'
  containerClassNames='z-index-200'}}
    <div class="pb1">
      <div class="tooltip-arrow-wrapper">
        <div class="tooltip-arrow-parent">
          <div class="br2 pa2 bg-dark-gray white f6">
            Tooltip text
          </div>
          <div class="tooltip-arrow"></div>
        </div>
      </div>
    </div>
{{/tether-dialog}}

However, this is error prone and it doesn't even look like a tooltip! Instead, let's create a new API that's more concise and expressive.

{{#em-tooltip target=".target"}}
  Tooltip text
{{/em-tooltip}}

Later in the video, we'll add the new tooltip to an internal styleguide so other developers to can see how the component is used within the application.

Summary

Questions?