Grow your CSS skills. Land your dream job.

Customizing jQuery Tooltip styling

  • # March 26, 2013 at 11:01 am

    I’m customizing the jQuery UI tooltip to look like [this](http://i.imgur.com/38kYdfU.png “”). My current status looks like [this](http://codepen.io/Isuru-Nanayakkara/pen/vzjpD “”).

    I’m stuck on how to position the arrow on the left side of the tooltip as shown in the image.

    Can someone please help me out in this?

    P.S : I’m not sure if you can notice, but there’s a slight gray color border around the tooltip. I saw it clearly when I applied the same code on a web page. Although I’ve removed all the CSS rules for related to borders, the gray line still appears. How can I remove that?

    Thank you. :)

    # March 26, 2013 at 1:05 pm

    I’m not entirely sure that this can be done.

    I’m no expert in HQ or JQUI but I don’t think it’s set up to do that.

    Without getting into the full CSS of the JQUI, I can’t speak further as there seem to be classes in there that aren’t actually doing anything.

    # March 26, 2013 at 1:18 pm

    Oh! Is that so? Welp, that’s too bad. Thanks anyway. As always :)

    # March 26, 2013 at 1:23 pm

    Not saying it can’t…just I can’t figure it out from what I am seeing.

    Others might be (**are**) better at that than I.

    # March 26, 2013 at 1:33 pm

    This might get you started, don’t have time now to make it prettier: http://codepen.io/CrocoDillon/pen/Dmiqw

    Only changed some CSS.

    # March 26, 2013 at 3:26 pm

    Sweet! I made some slight positioning changes in the arrow and its all good. Thanks a lot, man :)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".