Styling a default tooltip

Question

Using jQuery, I have implemented tooltip in my html. Now I want to style my tooltip.

How can I do that?

My JavaScript code for the tooltip is this:

$('.bootstrap-switch-handle-on').hover(function () {
    $(this).css('cursor', 'pointer')
           .attr('title', 'This is a hover text.');
}, function () {
    $(this).css('cursor', 'auto');
});

Thanks

Answer 1

It looks like you are just adding the title attribute to the .bootstrap-switch-handle-on element. The subsequent "tooltip" is generated by the browser and cannot be styled. If you are using Bootstrap, you can use their built in Tooltip which can be styled with CSS. http://getbootstrap.com/javascript/#tooltips