title: Connecting JQuery UI - Tooltip with Raphael 2.x
body: <p>im trying to set up an existing jquery solution for tooltips on my Raphael JS Interface.
  Raphael Wraps inside an  a  tag. I really dont know how to call it.</p>
  
  <p>I dont wanna use another solution, because im using it already on the whole project and i dont wanna change everything. I hope it works so far. I heard about QTip, but im sure there is a way to connect those. every thing i tried instead of $( document ).tooltip doesnt work yet. Here is what I got so far. Thanks for your help. <a href="http://jsfiddle.net/algoti/Lyt9dguh/" rel="nofollow">http://jsfiddle.net/algoti/Lyt9dguh/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// BUTTONS ---------------------------------------------------------------------------------------------------
  var clicker = rsr.set();
  clicker.push(
   c1 = rsr.path("m 554.95017,1182.8675 53.08003,0 0,51.8423 -53.08003,0 z"),   c1.attr({ title: '1'}), //gfx1 on p1
   c2 = rsr.path("m 630.65654,1182.8675 53.07996,0 0,51.8423 -53.07996,0 z"),   c2.attr({ title: '2'}), //gfx1 on p2
   c3 = rsr.path("m 705.54,1182.8675 53.08,0 0,51.8423 -53.08,0 z"),            c3.attr({ title: '3'}), //gfx1 on p3
   c4 = rsr.path("m 780.8578,1182.8016 53.0801,0 0,51.8424 -53.0801,0 z"),      c4.attr({ title: '4'}), //gfx1 on p4
   c5 = rsr.path("m 897.6826,1182.8675 53.08,0 0,51.8423 -53.08,0 z"),          c5.attr({ title: '5'}), //gfx2 on p5
   c6 = rsr.path("m 972.566,1182.4593 53.08,0 0,51.8424 -53.08,0 z"),           c6.attr({ title: '6'}), //gfx2 on p6
   c7 = rsr.path("m 1048.2723,1182.8675 53.08,0 0,51.8423 -53.08,0 z"),         c7.attr({ title: '7'}), //gfx2 on p7
   c8 = rsr.path("m 1123.5705,1182.8675 53.08,0 0,51.8423 -53.08,0 z"),         c8.attr({ title: '8'}), //gfx2 on p8
   c9 = rsr.path("m 1202.1536,1182.0446 53.08,0 0,51.8424 -53.08,0 z"),         c9.attr({ title: '9'}), //gfx2 on p9
   c10 = rsr.path("m 1283.6202,1183.2823 53.08,0 0,51.8423 -53.08,0 z"),        c10.attr({ title: '10'}), //gfx3 on p10
   c11 = rsr.path("m 1359.7413,1182.4593 53.08,0 0,51.8424 -53.08,0 z"),        c11.attr({ title: '11'}), //gfx3 on p11
   c12 = rsr.path("m 1435.4476,1183.2823 53.08,0 0,51.8423 -53.08,0 z"),        c12.attr({ title: '12'})  //gfx3 on p12
  );
  clicker.attr({
   fill: '#000', 
   opacity: '0',
   stroke: 'none',
   cursor: 'pointer',
      href: '#',
   });
  clicker.hover(
      function(){
          this.animate({
              "opacity": "0.2"
          }, 100);
      },
      function(){
          this.animate({
              "opacity": "0"
          }, 100)
      }
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ui-tooltip, .ttarrow:after {
      border: 1px solid white;
   background:#19334c;
   -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  .ui-tooltip {
      padding: 10px 20px;
      color: white;
      text-transform: uppercase;
   width: 150px;
   text-align:center;
    }
    .ttarrow {
      width: 70px;
      height: 16px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      margin-left: -35px;
      bottom: -16px;
    }
    .ttarrow.top {
      top: -16px;
      bottom: auto;
    }
    .ttarrow.bottom {
      bottom: -16px;
      top: auto;
    }
    .ttarrow.left {
      left: 50%;
    }
    .ttarrow:after {
      content: "";
      position: absolute;
      left: 20px;
      top: -20px;
      width: 25px;
      height: 25px;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    .ttarrow.top:after {
      bottom: -20px;
      top: auto;
    }
    .tooltip-position {
      top: -moz-calc(50% + 200px); /* Firefox */!important
   top: -webkit-calc(50% + 200px); /* WebKit */!important
   top: -o-calc(50% + 200px); /* Opera */!important
   top: calc(50% + 200px); /* Standard */ !important
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
   $(function() {
      $( document ).tooltip({
        position: {
          my: "center top+80",
          at: "center bottom",
          using: function( position, feedback ) {
            $( this ).css( position );
            $( "&lt;div&gt;" )
              .addClass( "ttarrow" )
              .appendTo( this );
          }
        }
      });
    });
     &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>