How To Change The Tool Tip Background Color, Tooltip Displays In Td

i have a it shows the tootltip while mouse over, now i would like to change the background color of the tooltip. is there any way of using CSS or JQuery or using class attribute &

Solution 1:

Try Implementing this in your td:

<table border="2px">
   <tr>
     <td data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">Tooltip on bottom
     </td>
   </tr>
</table>

You could refer this: http://jsfiddle.net/ckxSs/585/

Solution 2:

I think you would love to see this link for customizing tooltip in jqueryUi:

https://jqueryui.com/tooltip/#custom-style

Hope this may help you.

Thanks!!

Solution 3:

You can use jQuery Plugin or pure css based customised tooltip.

one of the way is below mentioned.

**Include**

jQuery 

 **Inside td keep like this**
    <a href="#" data-toggle="tooltip" data-placement="bottom"
       title="" data-original-title="Tooltip on bottom"
       class="red-tooltip">#487105 CLASSIC LOOSE RD124473 ENGINEERED 2X1-</a> 
**CSS**

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}

**JS**

$(document).ready(function(){
    $("a").tooltip();
});

View Example - http://jsfiddle.net/ckxSs/16/