CODEWITHSUNDEEP
jquerycsstooltip
jstacks
jstacks

Reputation: 2437

Create tooltip using jQuery or...?

How would I to create a tooltip with a pointer to replace a regular div? I already have the code I want using a regular div. I just want a the div to have a little triangle pointer on it. Do I need to use jQuery (a tooltip plugin of some sort perhaps) to get this done? Or is there a way to do this with CSS (I know you can use borders to create some shapes) or using an image for it?

I just want to know the best way to approach this.

Also, it might be important to note that I will be using .animate() to widen the tooltip. However, I'd like the pointer to remain the same size and stationary. So, not sure if this eliminates the ability to use an image (since it would widen the entire image as one, stretching and moving the pointer as well).

edit*** I want it to look something like this:

http://jsfiddle.net/jhacks/7BNgW/11/

However, it will have a border...so cannot do what I did in that fiddle to accomplish it.

Help is greatly appreciated. Thanks!

Upvotes: 0

Views: 603

Answers (1)

Purag
Purag

Reputation: 17061

If you make a div with a border-radius that makes it appear circular and set the border-bottom, you'll get the triangle shape that you're after.

Upvotes: 1

Related Questions