The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Customizing jQuery Tooltip styling

  • # March 26, 2013 at 11:01 am

    I’m customizing the jQuery UI tooltip to look like [this]( “”). My current status looks like [this]( “”).

    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:

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed