Grow your CSS skills. Land your dream job.

Problem with tooltip

  • # December 23, 2012 at 12:07 pm

    I m learning to create tooltip for a project and I m required to create the tooltip exactly same as we see on facebook.com.
    here is the code http://jsfiddle.net/sayedtaqui/3JCqx/6/

    the tooltip which is shown in the code that I have, is rectangular and I need to add the “V” shape at the bottom(as seen on facebook). I tried to use an image and played with the background-position-x and y but didn’t work very well. What do I do to add the V shape at the bottom of the tooltip?
    Thanks in advance

    # December 23, 2012 at 12:28 pm

    @sayedtaqui, you can create arrow with css and then incorporate somehow with your tool tip by positioning it absolutely. I have never done tooltip like that before so you might want to play with it.
    Here’s the arrow pointing down, http://codepen.io/jiri/pen/JuHow

    # December 23, 2012 at 1:02 pm

    Hey jurotek , that was help check this one now http://jsfiddle.net/sayedtaqui/tuFhr/4/

    # December 23, 2012 at 1:18 pm

    @sayedtaqui, very nice

    # December 23, 2012 at 2:22 pm

    yes thanks a lot

    http://jsfiddle.net/sayedtaqui/tuFhr/11/

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

You must be logged in to reply to this topic.

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