4

Can you please take a look at this JsFiddle and let me know that how I can center the tooltip inside the SVG? I already see the same question on this post but to be honest it was too confusing for me!

Here is the code I have:

<div class="container">
 <div class="well">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="400px" height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
    <ellipse class="firststar" cx="200" cy="200" rx="150" ry="150"/>
   </svg>
 </div>
</div>

and the jquery code:

$('.firststar').tooltip({title:'Test SVG Centering', container:'.well', placement: 'top'});
Community
  • 1
  • 1
Mona Coder
  • 6,212
  • 18
  • 66
  • 128
  • What exactly was confusing about the other question and its answers? – Robert Longson Jun 16 '13 at 01:04
  • Hi Robert, Thanks for you comment , well I can say all part of the code.As you can see I have a very simple SVG and I am not getting how to use the code in the jquery part? besides I do not know what is 'http://www.w3.org/2000/svg'? As someone already posted on the question, the post contains a very small part of the question and it is hard to understand it completely – Mona Coder Jun 16 '13 at 06:00
  • You have to find that function in your copy of jquery and modify it. – Robert Longson Jun 16 '13 at 07:18
  • function in your copy of jquery! which copy? I just download the jquery from jquery.com and I do not have nothing more! all are above mentioned linnk – Mona Coder Jun 16 '13 at 07:33
  • Is there any idea to fix this issue? – Mona Coder Jun 21 '13 at 15:07
  • Hi Robert the problem is I do not know how to do that and that's why I am asking it here :-) – Mona Coder Jun 21 '13 at 15:55
  • I don't know how to edit it! which part and what to edited to be? – Mona Coder Jun 21 '13 at 18:19
  • Ok i get it now That any way. I updated the jsfiddle file based on bbill comment it change the position of tooltip , however it is not still in the center! – Mona Coder Jun 21 '13 at 18:56

1 Answers1

2

These are the steps spelled out:

  1. Download the Bootstrap source

  2. The question you linked to apparently has a solution to the bug in Boostrap. Copy the code for getPosition. Add a case for center in the tooltip switch (Ctrl+F for getPosition again, but find not the function, but its use), like so:

    case: 'center':
  tp = {top: pos.top + pos.height / 2 - actualHeight / 2, 
        left: pos.left + pos.width / 2 - actualWidth / 2}
  break

  3. Make sure to change the link in your HTML to reference the updated bootstrap.js file.

Edit: link to working JFiddle. Bootstrap code has changed since the other post, and this is the simplest way to achieve what you want.

Community
  • 1
  • 1
bbill
  • 2,264
  • 1
  • 22
  • 28
  • In case you're curious about the history of this fix, and why the code works the way it does, the post you linked also has some details. As Mr. Robert Longson explained in a bug report (https://bugzilla.mozilla.org/show_bug.cgi?id=649285), SVG elements have no height attribute, but the Bootstrap code assumes that they do. Thus, he points out that the way to get the height of an SVG element is $(element).getBBox().height (http://stackoverflow.com/questions/7620509/how-does-one-get-the-height-width-of-an-svg-group-element/9131261#9131261). That's what the code you're pasting does. – bbill Jun 21 '13 at 18:06
  • Hi bbill, thanks for your perfect instruction. I updated the code base on link and also updated the jsfiddle link but the tooltip not still showing in the center. It is locating on the top in fact! Can you please let me know why this is happening? – Mona Coder Jun 21 '13 at 18:54
  • I also removed the "placement: 'top'" but the tooltip still popping up on the top of svg and not in center – Mona Coder Jun 21 '13 at 19:15
  • 1
    placement only accepts top, bottom, left and right according to the documentation. Your best bet is to set it to right and then change one line in that same bit of code you modified earlier to width = bbox.width / 2 – Robert Longson Jun 21 '13 at 19:44
  • 1
    Right. Maybe a better solution would be to go to where getPosition is used and look at the switch statement there, adding a center case and following the examples of right, top, left, etc. to add a tooltip in the center of the element. – bbill Jun 21 '13 at 19:48
  • Robert and bbill thank you both for helping me about this it is working now. Once again thanks – Mona Coder Jun 21 '13 at 20:57