title: How to auto margin-left for the message bar
body: <p>I am trying to make a message which displaces on hover.
  My code:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.showtext:hover:before {
  content: attr(data-content);
  padding: 0.8em 1em;
  position: absolute;
  color: #fff;
  background: #47a3da;
  margin-left: 5%;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="showtext" data-content="Message"&gt;Hover Me&lt;/span&gt;
  </code></pre>
  
  <p>I have set <code>margin-left</code> to <code>5%</code> but it doesn't work all the time. It overlaps when the text inside span is longer, so how can I set it to auto <code>margin-left</code> a little, say <code>10px</code>?</p>
  
  <p>I have tried to set to <code>auto</code> but it didn't work.
  Also, how can I add a triangle at the left of the message so it points on the span text.</p>