title: How to apply background pattern image to html tooltip arrow?
body: <p>I am implementing a custom jquery plugin for tooltips. This plugin will show a tooltip box when mouse is hovered on a specific element. My tooltip block area has an arrow which is pointing towards base element.</p>
  
  <p>I want to apply repeating texture image to entire tooltip including the arrow. 
  I can assign pattern image to tooltip background but how can i assign it to the arrow.  </p>
  
  <p>My problem is more illustrated in following image :  </p>
  
  <p><img src="https://i.stack.imgur.com/NoBSZ.jpg" alt="enter image description here">  </p>
  
  <p>Following is the code for arrow :<br>
  HTML:</p>
  
  <pre><code>&lt;div class="tooltip_outer"&gt;
    &lt;div class="tooltip_arrow"&gt;&lt;/div&gt;
    &lt;div class="tooltip_txt"&gt;Tooltip content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tooltip_outer {
    position: absolute;
    z-index: 5;
    background: #000000 url(images/pattern.png);
    padding: 0;
    margin: 5px 3px;
    width: 135px;
    box-shadow: 0 0 10px #999;
  }
  .tooltip_arrow {
    top: -14px;
    position: absolute;
    border: 7px solid transparent;
    display: inline-block;
    border-width: 7px;
    border-bottom-color: #000000;
    left: 50%;
  }
  .tooltip_txt {
    margin: 10px;
    color: white;
  }
  </code></pre>
  
  <p>Please guide me. Thanks in advance.</p>