How to a add a image to a HTML tooltip using CSS

When showing tooltip we can’t insert an image by img tag but we can use this method to add images in tooltip.

HTML Code

<input name="custcol_ag_checkaccountnumber" data-id="custcol_ag_checkaccountnumber" type="text" id="custcol_ag_checkaccountnumber-inputid" class="product-views-option-text-input" data-action="field-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-available="true" pattern="^[0-9(X/x)(D/d)(C/c) ]{0,15}$" placeholder=" Account Number" data-original-title="Please enter your account number exactly as it appears on your check. Including leading zeros if applicable. You can use the letter “X” for space, “D” for the  [<span class=&quot;img-U1&quot;></span>] symbol and “C” for the [<span class=&quot;img-U2&quot;></span>] symbol.">

CSS Code

span.img-U1{    
     top: 8px;    
     position: relative;    
     content: url(getExtensionAssetsPath('img/U+2449.gif'));
}
span.img-U2 {    
     position: relative;    
     top: 7px;    
     content: url(getExtensionAssetsPath('img/U+2448.gif'));
}

Results