I am struggling to apply my custom CSS class on top of the jQueryUI tooltip. Although the tooltip is displaying correctly, my styles are not being applied. Here is the code I'm using:
$(document).ready(function () {
$("#roles").tooltip({ content: "Start typing a name for the IT role you're staffing. There are 75 to choose from. If you're uncertain, start with something general like '<i>Manager</i>'" });
});
HTML
<input id="roles" type="text" class="wGridPx_16"/>
CSS
<style>
.ui-tooltip
{
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.82);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
</style>
I have tried various solutions from Q/A blogs like jquery ui tooltip custom class on page load but none of them worked for me. Can someone please assist me in resolving this issue?