I've been working on a customized jQuery plugin for tooltips. The tooltip box appears when the mouse hovers over a specific element, complete with an arrow pointing towards the base element.
My goal is to apply a repeating texture image to the entire tooltip, including the arrow. I know how to assign the pattern image to the background of the tooltip, but I'm unsure how to do so for the arrow itself.
The issue is best illustrated in the following image:
Here's the code for the arrow:
HTML:
<div class="tooltip_outer">
<div class="tooltip_arrow"></div>
<div class="tooltip_txt">Tooltip content</div>
</div>
CSS:
.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;
}
If anyone can offer some guidance on how to achieve this, it would be greatly appreciated. Thank you in advance!