[JQuery] Smart Tags

[dday9]

I wanted something that mimics smart tags that are found in IDE's like Visual Studio and applications like Microsoft Office. Here is a wiki page on them if you want more information: https://en.wikipedia.org/wiki/File:Smarttags.PNG

This is my solution to the smart tag design:

Markup

<div class="smartTag">
  <header>
    <i class="fa fa-info-circle smartTagInfo"></i> <!-- font awesome icon. css external sheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css -->
    <i class="fa fa-caret-down smartTagDropDown"></i> <!-- font awesome icon. css external sheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css -->
  </header>
  <main>
    <p>Item 1</p> <!-- example only -->
    <p>Item 2</p> <!-- example only -->
    <p>Item 3</p> <!-- example only -->
  </main>
</div>

CSS

.smartTag {
  max-width: 10em;
}

.smartTag header {
  background-color: #666;
  color: #fff;
  display: block; /* IE Fix */
  padding: .25em;
  max-width: 2em;
}

.smartTagDropDown {
  cursor: pointer;
}

.smartTag main {
  border: 1px solid #666;
  display: block; /* IE Fix */
  padding: 1em;
}

JQuery

$(function() {
  //hide all smartTagDropDowns and <main> in smartTags
  $('.smartTagDropDown').hide();
  $('.smartTag main').hide();
  
  //toggle the smartTagDropDowns on hover
  $('.smartTag').hover(
    function() {
      $(this).find('.smartTagDropDown').fadeIn();
    }, function() {
      $(this).find('.smartTagDropDown').fadeOut();
      $(this).find('main').fadeOut();
    }
  );
  
  $('.smartTagDropDown').on('click', function() {
    $(this).closest('.smartTag').children('main').fadeIn();
  });
});

Fiddle: http://codepen.io/anon/pen/Vabgam