1

I am using beautytips jquery plugin here is the demo link for one of my project. I have an image and when clicked on it, it pops up a Div and shows the relative contents but the spike's position is always in the middle. I wanted to change this spike's position left and right for other images but I don't know how to do this. I am also attaching the screen-shot for this middle spike position. Please help me to align this spike in left and right too.here is the screen shot

like this

jeewan
  • 1,597
  • 5
  • 23
  • 40

1 Answers1

2

Since this doesn't seem to be possible with your tooltip (see below for explanation) choice and you are not stuck with this option only check out this tooltop called qtip:

Specially check out the options of positioning it has here, the top left suits you perfectly in my opionion, I hope it helps, see screenshot:

enter image description here

Also, there are many other helpful plugins out there, see a list here, maybe you prefer any of them...

Edit I think I found what the problem was, the length of the spike is not long enough and because of that it is simply not showing the change in the centerPoint, that unfortunately I think it is the plugin was made, chec this example out:

http://jsfiddle.net/43Acn/5/

enter image description here

Now if I only change the length of the spike see it here http://jsfiddle.net/43Acn/6/ you will see this:

enter image description here

Note that the only change was spikeLength: 30, to spikeLength: 5,...

I don't know whether you want to align the spike with respect to the bubble or to the image, if it is to the bubble then you must use this parameter:

centerPointX: .5,

Check the source code and at the very bottom you will see the default option for this parameter is .5 this means 50%. if you want 30% (of the bubble) you should use:

centerPointX: .3,

You can also use centerPointYif you wish to.

Se a working example here.

Try changing centerPointY: .9, to centerPointY: .1, to see the changes...

Trufa
  • 39,971
  • 43
  • 126
  • 190
  • Hi Trufa, I have uploaded one more image above. I hope this will help you to understand what I want to design. I tried the property centerPointX but does not work. Can you please tell me the solution. – jeewan Jul 13 '12 at 00:30
  • Hi Trufa here is the link of my html file : http://jeewanaryal.web44.net/beautytips/beautytips/baloonTest.html – jeewan Jul 13 '12 at 00:49
  • @soflover please try to make a jsfiddle like I did since your javascript if minified and I can't read it nor show you what you want to modify... – Trufa Jul 13 '12 at 00:51
  • here is my jsfiddle link http://jsfiddle.net/jeewanaryal/hwtTK/3/ . I am trying to make 3 positions for the spike: left, middle and right. can you please check this code. – jeewan Jul 13 '12 at 01:02
  • @soflover please see my edit! Unfortunately I think there are no much ways around it, the problem is with the length of the spike... – Trufa Jul 13 '12 at 01:13
  • [here](http://jsfiddle.net/hwtTK/4/) is your example with the changed property, note that the change is almost unnoticeable also see [this one](http://jsfiddle.net/hwtTK/5/) and you'll see better the change with a longer spike... – Trufa Jul 13 '12 at 01:19
  • I have to leave now I'll be home in a couple of hours and try to help you out but now I'll add another edit with an option, please check it out... – Trufa Jul 13 '12 at 01:25
  • Hi Traufa, thanks a lot. I am checking your modifications and also trying to see the jquery.bt.js file. I will post if I get other solution. Take care ... – jeewan Jul 13 '12 at 01:29
  • @soflover great also take a look at my last edit and see if it helps. – Trufa Jul 13 '12 at 01:30
  • hey Trufa, finally I got the solution, thanks for your help. Your Edits in jsfiddle helped me finally... superb dude, thanks :-) – jeewan Jul 13 '12 at 02:16
  • Hi Trufa, I did not use that plug in. Yesterday, I wrote my own code from scratch for my requirement and that just worked for me. You can see the result here: http://jeewanaryal.web44.net/mhf/WebContent%20july13/home.html currently I am working for this company and I need to make that feature in the home page. I did not use any plugin for this. For example click any of the 7 images just below the slider – jeewan Jul 16 '12 at 23:09
  • please don't be sad for closing this Q/A. I am very thankful to you for your answers :-) – jeewan Jul 16 '12 at 23:11
  • @soflover glad you fixed that. Anyway please consider that this is a public forum and if you accept the answer it will show that it answers the original question (which I think it does no matter what you ended up doing). Anyway that is completely up to you :) cheers! – Trufa Jul 17 '12 at 16:24