Creating HTML/CSS based speech bubbles with jQuery

14,309

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; 
Share:
14,309
amber
Author by

amber

I take a lot of photos and I have written a lot of tools around my photography pipeline. I specialize in fine art and live event photography including theater, dance, and musical performances. I have a deep love of playing with highlights and shadows in my photographic work and turning perception on its ear. My work with the Edge of Propinquity has garnered me a couple of awards so far, one in 2008 for the image "In, Through, Beyond" appearing the Kendrick series by Jennifer Brozek and another in 2009 and 2011 for the piece "Her Return", created for James M. Sullivan's Santa Maria stories. When not at shoots, I spend spare time writing software, belly dancing and studying and other styles of dance, playing games with my family and loved ones, and sleeping. No, scratch that last one, I no have time for sleep.

Updated on June 25, 2022

Comments

  • amber
    amber almost 2 years

    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.

  • Mr. Meeseeks
    Mr. Meeseeks about 10 years
    You can do fading with CSS3 transitions. EG: w3schools.com/css/css3_transitions.asp