A pure CSS3 tooltip

readme.markdown

A pure CSS3 tooltip:

Inspired by the pretty cool jQuery tooltips @ jQuery Tools I decided to make a UI widget for my app that was 100% CSS3. Take a look and let me know what you think of my solution.

complies.css

.axle_tooltip {
  width: 200px;
  height: auto;
  padding: 10px 40px 20px 20px;
  background: rgba(28, 29, 31, 0.6);
  background: -moz-linear-gradient(top, rgba(28, 29, 31, 0.6) 0%, #1c1d1f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(28, 29, 31, 0.6)), color-stop(100%, #1c1d1f));
  background: -webkit-linear-gradient(top, rgba(28, 29, 31, 0.6) 0%, #1c1d1f 100%);
  background-image: -o-linear-gradient(top, rgba(28, 29, 31, 0.6) 0%, #1c1d1f 100%);
  border: 2px solid white;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  -moz-box-shadow: 0 0 15px 3px rgba(28, 29, 31, 0.6);
  -webkit-box-shadow: 0 0 15px 3px rgba(28, 29, 31, 0.6);
  box-shadow: 0 0 15px 3px rgba(28, 29, 31, 0.6);
  color: white;
  font-size: 1.25em;
  font-weight: inherit;
  line-height: 1.5em;
  font-weight: bold;
  position: absolute;
  margin: 100px 0 0 100px; }
  .axle_tooltip .tooltip_text {
    display: block;
    color: white !important; }
  .axle_tooltip .tooltip_close {
    position: absolute;
    right: 8px;
    top: 8px;
    background: #1c1d1f;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px; }
    .axle_tooltip .tooltip_close a {
      color: white;
      display: block; }
      .axle_tooltip .tooltip_close a:hover {
        text-decoration: none; }
  .axle_tooltip .tooltip_arrow {
    display: block;
    position: absolute;
    width: 34px;
    height: 20px;
    bottom: -22px;
    border-top: 2px solid #1c1d1f;
    left: 102px; }
    .axle_tooltip .tooltip_arrow span {
      border-style: solid;
      border-width: 16px 16px 0px 16px;
      border-color: #1c1d1f transparent transparent transparent;
      display: block;
      width: 1px;
      position: relative;
      left: 2px; }
    .axle_tooltip .tooltip_arrow:before {
      content: "|";
      position: absolute;
      -webkit-transform: rotate(-44deg);
      -moz-transform: rotate(-44deg);
      -o-transform: rotate(-44deg);
      transform: rotate(-44deg);
      right: 10px;
      top: -11px;
      left: 0px;
      font-size: 28px;
      z-index: 1000;
      -moz-text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      -webkit-text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      font-weight: normal; }
    .axle_tooltip .tooltip_arrow:after {
      content: "|";
      position: absolute;
      -webkit-transform: rotate(44deg);
      -moz-transform: rotate(44deg);
      -o-transform: rotate(44deg);
      transform: rotate(44deg);
      right: 1px;
      top: -3px;
      left: 23px;
      font-size: 28px;
      z-index: 1000;
      -moz-text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      -webkit-text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      text-shadow: 0 0 15px rgba(28, 29, 31, 0.6);
      font-weight: normal; }

html

<div class="axle_tooltip">
  <span class="tooltip_text">A must have tool for designing better layouts and more intuitive user-interfaces.</span>
  <span class="tooltip_close"><a href="#">x</a></span>
  <span class="tooltip_arrow"><span></span></span>
</div>

oocss_object_assigned_to_class.sass

.axle_tooltip
  +semi_trans_down_arrow_tooltip(200px, auto, 100px 0 0 100px, 102px, transparentize($alpha_grey, .4), $alpha_grey)

support_mixins.sass

/////// gray color blocks ////////
$alpha_grey: #1c1d1f
$bravo_grey: #fff

$shadow_color: transparentize($alpha_grey, .4)
/////// gray color blocks ////////


/////// transform arguments //////////
// http://www.w3schools.com/css3/css3_pr_transform.asp

=transform ($function)
  -webkit-transform: $function
  -moz-transform: $function
  -o-transform: $function
  transform: $function
/////// transform arguments //////////

/////// border-radius arguments  /////////
=border_radius ($border_radius)
  -moz-border-radius: $border_radius
  -webkit-border-radius: $border_radius
  border-radius: $border_radius
/////// border-radius arguments  /////////


//////// gradient arguments /////////
=two_stop_linear_gradient ($start_color, $end_color)
  // default fallback //
  background: $start_color
  // Mozilla browsers Firefox 3.6+ //
  background: -moz-linear-gradient(top, $start_color 0%, $end_color 100%)
  // Safari 4.0 //
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start_color), color-stop(100%,$end_color))
  // Safari 5.0 //
  background: -webkit-linear-gradient(top, $start_color 0%, $end_color 100%)
  // Opera 11.10 //
  background-image: -o-linear-gradient(top, $start_color 0%, $end_color 100%)
//////// gradient arguments /////////


/////////// semi transparent tooltip ////////////
=arrow_lines($rotate, $left, $top, $right)
  content: "|"
  position: absolute
  +transform(rotate($rotate))
  right: $right
  top: $top
  left: $left
  font-size: 28px
  z-index: 1000
  +text_shadow(0 0 15px, $shadow_color)
  font-weight: normal

=semi_trans_down_arrow_tooltip($width, $height, $margin, $arrow_left, $start_color, $end_color)
  width: $width
  height: $height
  padding: 10px 40px 20px 20px
  +two_stop_linear_gradient ($start_color, $end_color)
  border: 2px solid $bravo_grey
  +border_radius(10px, 10px, 10px, 10px)
  +box_shadow(0 0 15px 3px, $shadow_color)
  color: $bravo_grey
  +large
  font-weight: bold
  position: absolute
  margin: $margin
  .tooltip_text
    display: block
    color: $bravo_grey !important
  .tooltip_close
    position: absolute
    right: 8px
    top: 8px
    background: $end_color
    width: 20px
    height: 20px
    line-height: 20px
    text-align: center
    +border_radius(5px)
    a
      color: $white
      display: block
      &:hover
        text-decoration: none
  .tooltip_arrow
    display: block
    position: absolute
    width: 34px
    height: 20px
    bottom: -22px
    border-top: 2px solid $end_color
    left: $arrow_left
    span
      border-style: solid
      border-width: 16px 16px 0px 16px
      border-color: $end_color transparent transparent transparent
      display: block
      width: 1px
      position: relative
      left: 2px
    &:before
      +arrow_lines (-44deg, 0px, -11px, 10px)
    &:after
      +arrow_lines (44deg, 23px, -3px, 1px)
/////////// semi transparent tooltip ////////////