Grow your CSS skills. Land your dream job.

Can we style the abbr title through css?

  • # December 25, 2012 at 1:02 am

    I m working on a project and m required to apply tooltip like we see on facebook. Is there any way to style the abbr title through css?

    [hmtl]

    This is a paragraph

    [html]

    # December 25, 2012 at 1:12 am

    You mean like this? http://jsfiddle.net/9dg7q

    # December 25, 2012 at 1:17 am

    no I wanted to style the pop up. I can do it with javascript like this http://jsfiddle.net/sayedtaqui/tuFhr/11/ however due to some complication I have to do it only with CSS. The example you have shown Chris is styling the text but not the pop up.
    Thanks.

    # December 25, 2012 at 1:21 am

    I have also done it with CSS http://jsfiddle.net/sayedtaqui/6HpFa/
    but can we manipulate the pop up directly?

    # December 25, 2012 at 1:22 am

    Check this: http://stackoverflow.com/a/8788410/938664

    # December 25, 2012 at 1:27 am

    If you’re asking if there’s a specific property to style this, the answer is no.

    # December 25, 2012 at 1:34 am

    Thanks Chris. This may work. but if you notice there are two pop ups showing up. one is the the style that we create and the other is the default “title” pop up. Is there any way to disable the other default pop up? http://jsfiddle.net/tDQWN/

    # December 25, 2012 at 2:40 am

    To my knowledge, you cannot remove those title tags. However, you could give them a name other than “title” and then the browser won’t do that. Here is an example. I just called it tooltip.

    http://jsfiddle.net/kevin11189/aPJZJ/

    # December 25, 2012 at 3:22 am

    @kevin11189 `tooltip` won’t validate. But, if you are using HTML5, then use the `data` attribute (i.e. `data-tooltip`).

    # December 25, 2012 at 5:51 am

    Thanks all it worked.

    # December 25, 2012 at 10:06 am

    Oh, very cool. Thank you @joshuahibbert . I didn’t know that they added that in HTML5.

    # December 25, 2012 at 10:28 am

    @joshuanhibbert Back off, Josh. I got this. =P

    # December 26, 2012 at 5:04 am

    Haha, sorry, Chris!

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

You must be logged in to reply to this topic.

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