GOOD

Tooltip

New Post

Title

More details to help someone with this form.

<section class="post-form">
  …
  <section class="tip">
    <div class="container">
      <h2>Title</h2>
      <p>More details to help someone with this form.</p>
    </div>
  </section>
</section>

New Post

Title

More details to help someone with this form.

<section class="post-form">
  …
  <section class="tip inactive">
    <div class="container">
      <h2>Title</h2>
      <p>More details to help someone with this form.</p>
    </div>
  </section>
</section>

Participants (hover)

129 people think this is good

<section class="post">
  <header>
    <section class="votes">
      <h2>129 people think this is good</h2>
      <ul>
        <li>
          <a href="…">
            <span class="avatar">
              <span class="tangerine size25" data-content="C"></span>
              <span class="name">Candy Li</span>
            </span>
          </a>
        </li>
        <li>
          <a href="…"
            ><span class="avatar">
              <img src="…" alt="">
              <span class="name">Kirby Culbertson</span>
            </span>
          </a>
        </li>
        …
      </ul>
    </section>
  </header>
</section>

Images & Video (hover)

<form class="comment-form">
  <p class="url inactive">
    <label>
      <span>Embed Video</span><br />
      …
    </label>
  </p>
  <p class="file">
    <label>
      <span>Attach Image</span><br />
      …
    </label>
  </p>
</form>

<form class="comment-form">
  <p class="url">
    …
    <button … class="cancel"><span>Cancel</span></button>
  </p>
</form>