Make jQuery tipTip plugin cross browser
Originally posted on Tumblr on
jQuery tipTip is a Drew Wilson’s plugin that I love and I use it in 90% of my projects. But because I use firefox, I found a small design problem in Tooltip. The background color is not the same, look at the differences:
You can see that the -webkit- browsers render the tooltip with a light gradient in contrast with firefox that hasn’t got gradient background. How to solve this problem?
Just open the tipTip css file and find the #tiptip_content selector and add this two attributes under -webkit-gradient- property
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .2), transparent);background-image: linear-gradient(top, rgba(255, 255, 255, .2), transparent);
That’s it your tipTip tooltip works correctly and with same color in all major browsers.
