Results 1 to 1 of 1

Thread: [JQuery] Smart Tags

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    South Louisiana

    [JQuery] Smart Tags

    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:

    This is my solution to the smart tag design:

    HTML Code:
    <div class="smartTag">
        <i class="fa fa-info-circle smartTagInfo"></i> <!-- font awesome icon. css external sheet: -->
        <i class="fa fa-caret-down smartTagDropDown"></i> <!-- font awesome icon. css external sheet: -->
        <p>Item 1</p> <!-- example only -->
        <p>Item 2</p> <!-- example only -->
        <p>Item 3</p> <!-- example only -->
    .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;
    $(function() {
      //hide all smartTagDropDowns and <main> in smartTags
      $('.smartTag main').hide();
      //toggle the smartTagDropDowns on hover
        function() {
        }, function() {
      $('.smartTagDropDown').on('click', function() {
    Last edited by dday9; Mar 24th, 2016 at 11:29 AM. Reason: Added IE Fix
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width