Grow your CSS skills. Land your dream job.

CSS speech bubble tool tip develop in Responsive

  • # May 3, 2013 at 8:40 am

    Hai Everyone

    I have developed a speech bubble tool tip using css. But it is not working in responsive style.

    Can any one assist me how to make a speech bubble tool tip in responsive.

    Regards
    Shaik Mussarath

    # May 3, 2013 at 10:50 am

    What do you have so far?

    Codepen example?

    # May 3, 2013 at 12:02 pm

    Define ‘responsive style’ and why it’s not working, in addition to what Paulie said.

    # May 6, 2013 at 3:40 am

    Paulie I have used a jquery function to call tool tip and to hide it

    $(“#showHint”).hover(
    function () {
    $(this).append($(“

    “+content+”

    “));
    },
    function () {
    $(this).find(“blockquote”).hide();
    }
    );

    AFter that blockquote and oval-speech are the main classes and here is the css part

    blockquote {
    margin:1em 0;
    }

    blockquote p {
    margin:0;
    font-size:2em;
    }

    .oval-speech p {
    font-size: 1.25em;
    }
    .oval-speech p {
    font-size: 1.25em;
    }
    blockquote p {
    font-size: 2em;
    margin: 0;
    }
    blockquote, blockquote p {
    color: #333333;
    font-family: lato;
    font-size: 14px !important;
    line-height: 1.5em;
    }
    .oval-speech-border:after {
    content:””;
    position:absolute;
    z-index:2;
    bottom:-40px;
    right:50%;
    width:20px;
    height:31px;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:#f3961c;
    margin-right:20px;
    background:transparent;
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px;
    -moz-border-radius-bottomright:40px 50px;
    border-bottom-right-radius:40px 50px;
    /* reduce the damage in FF3.0 */
    display:block;
    }
    .oval-speech-border > :first-child:before {
    content:””;
    position:absolute;
    z-index:1;
    bottom:-40px;
    right:50%;
    width:10px;
    height:10px;
    margin-right:45px;
    background:#f3961c;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    .oval-speech {
    position:absolute;

    width:210px;
    padding:15px 11px;
    margin:-12em auto 50px;
    text-align:center;
    color:#fff;
    background:#5a8f00;
    left: -7%;
    /* css3 */
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#b8db29), to(#5a8f00));
    background:-moz-linear-gradient(#b8db29, #5a8f00);
    background:-o-linear-gradient(#b8db29, #5a8f00);
    background:linear-gradient(#b8db29, #5a8f00);
    /*
    NOTES:
    -webkit-border-radius:220px 120px; // produces oval in safari 4 and chrome 4
    -webkit-border-radius:220px / 120px; // produces oval in chrome 4 (again!) but not supported in safari 4
    Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
    */
    -webkit-border-top-left-radius:220px 120px;
    -webkit-border-top-right-radius:220px 120px;
    -webkit-border-bottom-right-radius:220px 120px;
    -webkit-border-bottom-left-radius:220px 120px;
    -moz-border-radius:220px / 120px;
    border-radius:220px / 120px;
    }

    .oval-speech p {font-size:1.25em;}

    .oval-speech p {font-size:1.25em;}

    /* creates part of the curve */
    .oval-speech:before {
    content:””;
    position:absolute;
    z-index:1;
    bottom:-30px;
    right:50%;
    height:30px;
    border-right:60px solid #5a8f00;
    background:#5a8f00; /* need this for webkit – bug in handling of border-radius */
    /* css3 */
    -webkit-border-bottom-right-radius:80px 50px;
    -moz-border-radius-bottomright:80px 50px;
    border-bottom-right-radius:80px 50px;
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(0, -2px);
    -moz-transform:translate(0, -2px);
    -ms-transform:translate(0, -2px);
    -o-transform:translate(0, -2px);
    transform:translate(0, -2px);
    }

    /* creates part of the curved pointy bit */
    .oval-speech:after {
    content:””;
    position:absolute;
    z-index:1;
    bottom:-30px;
    right:50%;
    width:60px;
    height:30px;
    background:#fff;
    left: 39px;
    /* css3 */
    -webkit-border-bottom-right-radius:40px 50px;
    -moz-border-radius-bottomright:40px 50px;
    border-bottom-right-radius:40px 50px;
    /* using translate to avoid undesired appearance in CSS2.1-capabable but CSS3-incapable browsers */
    -webkit-transform:translate(-30px, -2px);
    -moz-transform:translate(-30px, -2px);
    -ms-transform:translate(-30px, -2px);
    -o-transform:translate(-30px, -2px);
    transform:translate(-30px, -2px);
    }

    # May 6, 2013 at 3:43 am

    CrocoDillon:

    Responsive means that It automatically adjusts its height and weight according to the media device. The properties should not go out side the div areas. This bubble tool tip when I resize the browser its not synchronizing based on the size.

    # May 6, 2013 at 4:06 am

    Of course it’s not responsive, you have defined set widths in px for everything.

    A lot of what you are doing cannot be made responsive as you can’t use % for pseud element borders.

    What you should probably be looking to do is make this **adaptive** by using media queries and adjusting the pixel values accordingly.

    # May 6, 2013 at 4:48 am

    OOH…..Thanks for your immediate reply.

    Paulie Do u have any ready made speech bubble tool tip which works even as responsive. Or can you please tell me how can I make this using media queries. I have no idea about Media queries.

    Thanking u

    # May 6, 2013 at 5:27 am

    Why don’t you simply use hint.css?

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

You must be logged in to reply to this topic.

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