Menu icon Foundation
Using Tooltips On Classes Rather Than Text

I am trying to create a tooltip that appears when you hover over the small colored boxes on the right of the tables. Here is what the table looks like:

Screen shot 2014 06 02 at 4.11.43 pm

Here is my scss and html:

section {
  @include grid-row();
}
section p {
  @include grid-column(12);
  font-family: $font-stack;
  font-size: 23px;
  padding: 0;
  margin: 0;
 }
.button {
  font-family: $font-stack;
  color: #fff;
  background-color: $secondary-color;
  height: 27px;
  text-align: center;
  border-radius: 7px;
  margin: 6px 0 5px 0;
  padding: 5px 7px 5px 7px;
}
.button:hover {
  background-color: $primary-color;
}
table {
  @include grid-column(12);
  padding: 0;
  border-left: none;
  border-right: none;
  text-align:right;      
  border-collapse:separate;
  border-spacing: 0 2px;
}
table {
  tr {
    background: #fff;
  }
  tr:hover {
    background: #EBF7FC;
  }
  tr td {
    padding:6px 8px;
  }
  tr td:first-child {
    border-left: 3px solid #fff;
  }
  tr td:last-child {
    border-right:3px solid #fff;
  } 
  tr:hover td:first-child {
    border-left: 3px solid $secondary-color;
  }
  tr:hover td:last-child {
    border-right:3px solid $secondary-color;
  } 
}
.status {
  color:#fff;
  width: 16.5px;
  padding: 5px 0;
  text-align: center;
}
.statusRunning {
  background-color: #059C00;
  @extend .status;
}
.statusPaused {
  background-color: #A4E786;
  @extend .status;
}
.statusIncomplete {
  background-color: #FFCC00;
  @extend .status;
}
.statusBroken {
  background-color: #FA4848;
  @extend .status;
}
.statusBlank { 
  padding: 0;
}
table tr td:nth-child(2) {
  text-align:left; 
}
.tightcell a {
 margin-right:25px;
 color: $secondary-color;
}
            

         

<section>
<p> Test.com Gamebox <a class="button" href="#">Create Game</a> </p>
  <table>
    <tbody>
      <tr>
        <td class="statusPaused"></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusPaused"></td>
        <td>The best game ever if it was done.</td>
        <td>0 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusIncomplete"></td>
        <td>Could be better but ya.</td>
        <td>0 / 50 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
    </tbody>
  </table>


<p> Next Thingy <a class="button" href="#">Create Game</a> </p>
  <table>
    <tbody>
     <tr>
        <td class="statusRunning"></td>
        <td>The best game ever if it was done.</td>
        <td>0 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusBroken"></td>
        <td>Could be better but ya.</td>
        <td>0 / 50 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
    </tbody>
  </table>
</section>
            

         

The only progress I've made so far is getting the question mark pointer to come up when you hover over some text that I put inside the status box. Also after waiting a couple seconds the tooltip text appears unstyled. It looks like this:

Example.jpg

Here is the html for that:

 <tr>
        <td class="statusPaused"><span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">Test</span></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
            

         

tooltipsscsshtml

I am trying to create a tooltip that appears when you hover over the small colored boxes on the right of the tables. Here is what the table looks like:

Screen shot 2014 06 02 at 4.11.43 pm

Here is my scss and html:

section {
  @include grid-row();
}
section p {
  @include grid-column(12);
  font-family: $font-stack;
  font-size: 23px;
  padding: 0;
  margin: 0;
 }
.button {
  font-family: $font-stack;
  color: #fff;
  background-color: $secondary-color;
  height: 27px;
  text-align: center;
  border-radius: 7px;
  margin: 6px 0 5px 0;
  padding: 5px 7px 5px 7px;
}
.button:hover {
  background-color: $primary-color;
}
table {
  @include grid-column(12);
  padding: 0;
  border-left: none;
  border-right: none;
  text-align:right;      
  border-collapse:separate;
  border-spacing: 0 2px;
}
table {
  tr {
    background: #fff;
  }
  tr:hover {
    background: #EBF7FC;
  }
  tr td {
    padding:6px 8px;
  }
  tr td:first-child {
    border-left: 3px solid #fff;
  }
  tr td:last-child {
    border-right:3px solid #fff;
  } 
  tr:hover td:first-child {
    border-left: 3px solid $secondary-color;
  }
  tr:hover td:last-child {
    border-right:3px solid $secondary-color;
  } 
}
.status {
  color:#fff;
  width: 16.5px;
  padding: 5px 0;
  text-align: center;
}
.statusRunning {
  background-color: #059C00;
  @extend .status;
}
.statusPaused {
  background-color: #A4E786;
  @extend .status;
}
.statusIncomplete {
  background-color: #FFCC00;
  @extend .status;
}
.statusBroken {
  background-color: #FA4848;
  @extend .status;
}
.statusBlank { 
  padding: 0;
}
table tr td:nth-child(2) {
  text-align:left; 
}
.tightcell a {
 margin-right:25px;
 color: $secondary-color;
}
            

         

<section>
<p> Test.com Gamebox <a class="button" href="#">Create Game</a> </p>
  <table>
    <tbody>
      <tr>
        <td class="statusPaused"></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusPaused"></td>
        <td>The best game ever if it was done.</td>
        <td>0 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusIncomplete"></td>
        <td>Could be better but ya.</td>
        <td>0 / 50 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
    </tbody>
  </table>


<p> Next Thingy <a class="button" href="#">Create Game</a> </p>
  <table>
    <tbody>
     <tr>
        <td class="statusRunning"></td>
        <td>The best game ever if it was done.</td>
        <td>0 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
      <tr>
        <td class="statusBroken"></td>
        <td>Could be better but ya.</td>
        <td>0 / 50 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
    </tbody>
  </table>
</section>
            

         

The only progress I've made so far is getting the question mark pointer to come up when you hover over some text that I put inside the status box. Also after waiting a couple seconds the tooltip text appears unstyled. It looks like this:

Example.jpg

Here is the html for that:

 <tr>
        <td class="statusPaused"><span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">Test</span></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Duplicate</a><a href="#">Archive</a></td>
      </tr>
            

         

This post has been closed. No new replies can be added.

Karl Ward about 5 years ago

The tooltips are not working ... Are you sure you have included ALL foundation javascript, or at least the tooltips js? Check your browser console and see if there are any error/warnings blocking the tooltip ...

The tooltip that appears in your screenshot, is the default browser tooltip that displays the title attribute after a short while ...

Matt Camp about 5 years ago

I found a solution to my problem:

My first issue was that I did not have modernizr running on my site. In the <head> section of your page add Modernizr:

<script src="/js/vendor/modernizr.js"></script>

This should work if your Foundation files are installed correctly, but for some reason mine were not. So I used this to install modernizr:

 <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>

Then to fix the issue proposed in the title, I had to add data-tooltip, tooltip classes (class="has-tip tip-top etc...") and the title inside of my <td>

So in the end my code look like this:

 <tr>
        <td data-tooltip class="statusPaused has-tip tip-top" title="Paused"></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Archive</a></td>
      </tr>

My scss didn't change (you can view it above in the question).

Thanks for the help and I hope this helps in the future!

Rafi Benkual about 5 years ago

Glad you got it, to eliminte the markuo as the issue, I replicated it in codepen http://codepen.io/rafibomb/pen/dyGhs