CSS speech bubble tool tip develop in Responsive

[mussarath]

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

[Paulie_D]

What do you have so far?

Codepen example?

[CrocoDillon]

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

[mussarath]

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);
}

[mussarath]

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.

[Paulie_D]

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.

[mussarath]

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

[Paulie_D]

https://css-tricks.com/video-screencasts/102-braindump-on-responsive-web-design/

[Kitty Giraudel]

Why don’t you simply use hint.css?

[Author]

Posts