• Home
  • Back to andrewckor.com

  • About Me

    Home
  • Follow me on Twitter
  • View my Flickr feed
  • Browse the Archive
  • Subscribe via RSS
  • Make jQuery tipTip plugin cross browser

    • Link
    • 0 notes
    • 1 year ago

    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.

    Tweet

  • articles

Prev Next