Create tooltip using jQuery or...?

Question

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!

What do you mean by "little triangle pointer"? Can you post a mockup image of what you want? It's easy to make arrows with CSS, so this might be the way to go with a float:. You need to give us a bit more detail. — Bojangles
– Bojangles, Commented Dec 27, 2011 at 2:14
I could be going in completely the wrong direction, but something like this JSFiddle perhaps? — Bojangles
– Bojangles, Commented Dec 27, 2011 at 2:18
I already have the code to get the tooltip function working. However, I just have a normal div, with no pointer (refer to my fiddle where I've added an example of the shape I'm looking for). So, I'm just looking to replace where I am using a normal div with a "tooltip" or div with a little pointer. The other requirement is that upon widening in with .animate() the pointer must stay in the same place and not widen. — jstacks
– jstacks, Commented Dec 27, 2011 at 2:29

Purag · Accepted Answer · 2011-12-27 02:14:59Z

1

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.

answered Dec 27, 2011 at 2:14

Purag

17.1k4 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jstacks Over a year ago

I do know how to get a triangle shape. But is it possibly to get the shape I am showing in my newly edited post? And, like I said, I was going for some borders, which makes the solution I did to get the shape not possible... unfortunately.

Collectives™ on Stack Overflow

Create tooltip using jQuery or...?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related