title: javascript random content in tooltip. How to add space when needed
body: <p>I use Jquery to render a tooltip from hidden <code>&lt;span&gt;</code>. What i do is that i store each <code>&lt;span&gt;</code> value in javascript variables and then i append theses variable into my tooltip like this <code>AppendTo tooltip(var1+var2+var3+etc..)</code></p>
  
  <p>My problem is that i need to make a paragraph space (padding) between some of the content displayed. Sometimes my tooltip only displays var1 and var2 (var3 and var4 are empty).</p>
  
  <p>For the spacing i'm actually using the css <code>padding-bottom</code> on var2. So if var3 is not empty the space is needed, but if var3 is empty i get an unwanted space..</p>
  
  <p>I try to figure out how could i add a space only when i'm sure that after var2 there would be some content. I'm thinking of somekind of counter. Like </p>
  
  <pre><code>if var1 not empty counter++
  if var2 not empty counter++
  if var3 not empty counter++
  If counter &gt; 2 var2 = var2 + space
  </code></pre>
  
  <p>But maybe you guys have a better idea :)</p>
  
  <p>Below my code :</p>
  
  <pre><code>&lt;script&gt;
  first_name = '';
  last_name = '';
  phone = '';
  email = '';
  address = '';
  tip_first_name = '';
  tip_last_name = '';
  tip_phone = '';
  tip_email = '';
  tip_address = '';
  
  first_name = $(this).children('span[class=p_first_name]').attr("data-tooltip");
      if(first_name != null)tip_first_name = '&lt;span class="tooltip_first_name"&gt;'+first_name+'&lt;/span&gt;';
  last_name = $(this).children('span[class=p_last_name]').attr("data-tooltip");
      if(last_name != null)tip_last_name = '&lt;span class="tooltip_last_name"&gt;'+last_name+'&lt;/span&gt;';
  phone = $(this).children('span[class=p_phone]').attr("data-tooltip");
      if(phone != null)tip_phone = '&lt;span class="tooltip_phone"&gt;'+phone+'&lt;/span&gt;';
  email = $(this).children('span[class=p_email]').attr("data-tooltip");
      if(email != null)tip_email = '&lt;span class="tooltip_email"&gt;'+email+'&lt;/span&gt;';
  address = $(this).children('span[class=p_address]').attr("data-tooltip");
      if(address != null)tip_address = '&lt;span class="tooltip_address"&gt;'+address+'&lt;/span&gt;';
  
  $('#hint').before('&lt;div id="tip" class="tip"&gt;&lt;div class="tip-personn"&gt;'+tip_first_name+tip_last_name+tip_phone+tip_email+tip_address+'&lt;/div&gt;&lt;/div&gt;');
  
  &lt;/script&gt;
  &lt;style&gt;
  .tooltip_last_name{
      padding-bottom:10px;
  }
  </code></pre>
  
  <p></p>