title: Using jQuery UI Tooltip with custom arrow causes tooltip issue
body: <p>I'm using <a href="http://jqueryui.com/tooltip/#custom-style" rel="nofollow noreferrer">Tooltip custom style plugin</a>...</p>
  
  <p>Now I want to display my tool tip message as displayed on these sites and as shown in the photo (<em>e.g., with an arrow to be part of the tooltip</em>): </p>
  
  <ul>
  <li><a href="https://www.neobux.com/m/r/" rel="nofollow noreferrer">Example link</a> </li>
  <li><a href="https://www.probux.com/register.php" rel="nofollow noreferrer">Example link</a></li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/ttzRa.png" alt="enter image description here"></p>
  
  <p>I try to apply several CSS rules, but I'm still not able to get it to look the way I want... please help me. Here is my CSS code:</p>
  
  <pre><code>body .ui-tooltip {
    border-width:0;
  }
  
  .ui-tooltip,.arrow:after {
    background:black;
    border:0 solid white;
  }
  
  .ui-tooltip {
    padding:10px;
    color:white;
    border-radius:5px;
    font-family:Verdana, sans-serif;
    font-size:12px;
    text-transform:none;
  }
  
  .arrow {
    width:70px;
    height:16px;
    position:absolute;
    left:0!important;
    margin-left:-25px;
    top:55%;
  }
  
  .arrow.top {
    top:-16px;
    bottom:auto;
  }
  
  .arrow.left {
    left:20%;
  }
  
  .arrow:after {
    content:"";
    position:absolute;
    left:20px;
    top:-20px;
    width:25px;
    height:25px;
    box-shadow:6px 5px 9px -9px black;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    tranform:rotate(45deg);
  }
  
  .arrow.top:after {
    bottom:-20px;
    top:auto;
  }
  
  .ui-tooltip {
    -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter:alpha(opacity=70);
    opacity:0.7;
  }
  </code></pre>
  
  <p>My display when I apply the above CSS code does not display a full tooltip:</p>
  
  <p><img src="https://i.stack.imgur.com/gpE3o.png" alt="i.imgur.com/4yCPu.png"> </p>
  
  <p>But I want it to look like this, full size:</p>
  
  <p><img src="https://i.stack.imgur.com/98GRw.png" alt="enter image description here"></p>
  
  <p>My CSS code arrow has problems and it's doesn't look like the example I provided.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Arrow problem is ok now... but if you see wanted display it's not same as i want </p>
  
  <pre><code>.ui-tooltip {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity:0.7;
  } 
  </code></pre>
  
  <p>I guess they haven't above CSS code... could you any one suggest to how their transparent work </p>