Tabs as bubbles with tails - JQuery vs CSS version.

tabs_with_tails.css

ul.tabs.primary li {
  height: 30px;
  line-height: 30px;
}
ul.tabs.primary li.active a:after {
  content: "";
  position: relative;
  bottom: -4px;
  border-style: solid;
  border-width: 8px 8px 0;
  border-color: #00a9e1 transparent;
  display: block;
  width: 0;
  height: 0;
  z-index: 1;
  margin: 0 auto;
}

tabs_with_tails.html

<div class="clear-block" id="tabs-wrapper">
  <ul class="tabs primary"><li><a href="/node/568">View</a></li>
    <li><a href="/node/568/edit">Edit</a></li>
    <li><a href="/node/568/search">Search</a></li>
    <li class="active"><a class="active" href="/node/568/configuration">Configuration</a></li>
    <li><a href="/node/568/devel">Devel</a></li>
  </ul>
</div>
<ul class="tabs secondary">
  <li class="active"><a href="/node/568/configuration" class="active">Configuration overview</a></li>
  <li><a href="/node/568/configuration/delivery">Delivery</a></li>
  <li><a href="/node/568/configuration/rule/add">Add rule</a></li>
</ul>

tabs_with_tails.js

$('ul.tabs.primary li.active a', context).each(function()  {
  var tab = $(this);
  var x = Math.round(tab.outerWidth() / 2 - 8);
  var tip = $('<span class="tab-tail"></span>').css({
                  'left': x + 'px',
                  'position': 'absolute',
                  'bottom': '-8px',
                  'border-style': 'solid',
                  'border-width': '8px 8px 0',
                  'border-color': '#00a9e1 transparent',
                  'display': 'block',
                  'width': 0,
                  'z-index': 1
              });
  tab.append(tip);
});