CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
amber
amber

Reputation: 1137

Creating HTML/CSS based speech bubbles with jQuery

In the design I was given by my PM, I need to create speech bubbles as a means of calling out features or providing help to the user.

Speech bubble call out example

The bubble should be able to handle any amount of text thrown at it. For example, it could be 15 words or a 150. Yes, that would be a big bubble.

The user clicks on the help button (?) and the bubble should fade in and not disturb the surrounding UI elements.

Upvotes: 3

Views: 14670

Answers (4)

user3292653
user3292653

Reputation: 622

Calculate the height from the top to the button and than draw the height from the div with the content inside from it. To get the height of the div with the content inside, create a duplicate of outside the viewport with the same css-properties.

To get the bubble have a look at this: http://www.ilikepixels.co.uk/drop/bubbler/

Upvotes: 0

HieuHT
HieuHT

Reputation: 469

Indeed border-radius is not supported in IE8 and below. Instead you could use Sprint or PIE CSS as workaround.

Upvotes: 0

Amy Groshek
Amy Groshek

Reputation: 808

Pure CSS solution with rounded corners will be hard if you want this to work with IE8 and below. Be sure to test in all platforms before you implement that one.

Upvotes: 0

Luke
Luke

Reputation: 2063

You can do it all with just css: http://nicolasgallagher.com/pure-css-speech-bubbles/

except the fading in part. But that is simple jquery.

also if you have everything working correctly and only can't figure out the rounded border you can try the css attribute `border-radius: #px;

it also has attributes for other browser compatibility:

-webkit-border-radius: #px; 
-moz-border-radius: #px;

Upvotes: 8

Related Questions