Improperly located popover and popover title

[ghost]

I am using popovers for the What is this? link for a credit card verification number field (see attached images). The popover contains an HTML table to format the text and image and is brought in via a PHP require() statement.

The line of HTML used for this is as follows: <span id="popover1" data-toggle="popover" data-placement="right" data-html="true" data-title="Visa/Discover Security Code" data-content="<?php require( "_html/visa_cvc.html" ) ?>"> <u>What is this?</u></span>

Then table code is as follows: <table class='cvc_table'><caption>This number is required & recorded as an additional security precaution.</caption><tr><td><img src='/lcu-store/_images/cvc/ccid_visa.gif' alt='Image of VISA/Discover CVC Number'></td></tr><tr><td>The 3-digit, non-embossed number printed at the right of the signature panel on the back of your card immediately following the account number.</td></tr></table>

Please note that the arrow of the popover is not aligned with the link as it should be. When I tried to set the data-location argument to "top", the popover was still positioned too low and completedly obscured the link, thereby preventing me from clicking it to dismiss the popover.

Also please note that when the table content is removed, the arrow returns to a location approximating the correct location and the title is not pinned to the top as advertised regardless of content presence.

No modifications were made to any Bootstrap CSS rules or Javascript code nor are there any CSS rules that supersede those published for a popover.

[cvrebert]

1. What version of Bootstrap are you using?
2. Which browsers does this happen on? What OS are you on?
3. Please create a simplified, self-contained live example (e.g. jsFiddle, jsBin) of the problem.
4. You might also try Bootstrap v3.0.0-wip and see if it happens to have fixed this (not likely, but possible).

[ghost]

Was able to fix the title problem with a CSS rule that over-rode something of mine that was breaking it, so that problem is solved.

As for the vertical displacement issue, here's the answer to your questions:

I'm using latest framework versions: Bootstrap 2.3.2, Modernizr 2.6.2, jQuery 1.10.2

Was able to duplicate the issue on jsBin with zero CSS code of my own. Other than a single rule on the form to move the popover down the page a bit to make it fully visible, only Bootstrap CSS rules are is active.

http://jsbin.com/otahaz/6/edit

Am confused as to download location of Bootstrap 3.0 wip. Link plz?

Failure states:

Hard failure with Safari 6.0.5/Mac.

With the latest versions of FF, Chrome, Opera, iCab, OmniWeb, MSIE10, Safari/Win, the popover fails on the first click, but after it is dismissed and re-clicked, the failure goes away (see attached screenshots of jsBin below).

Thanks!

On Jul 9, 2013, at 2:44 PM, Chris Rebert notifications@github.com wrote:

What version of Bootstrap are you using? Please create a simplified, self-contained live example (e.g. jsFiddle, jsBin) of the problem. You might also try Bootstrap v3.0.0-wip and see if it happens to have fixed this (not likely, but possible). — Reply to this email directly or view it on GitHub.

[cvrebert]

It's the 3.0.0-wip branch of the git repo. https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/assets/css/bootstrap.css https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/assets/js/bootstrap.js

[ghost]

Chris,

Tried Bootstrap 3 CSS, got the attached results. No joy! :-(

When I paste any Bootstrap JS code into jsBin, it tells me there are 50 errors, yet the same code works in the real world in a browser. What's with that?

http://jsbin.com/otahaz/7/edit

On Jul 10, 2013, at 12:52 PM, Chris Rebert notifications@github.com wrote:

It's the 3.0.0-wip branch of the git repo. https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/assets/css/bootstrap.css https://github.com/twitter/bootstrap/blob/3.0.0-wip/docs/assets/js/bootstrap.js

— Reply to this email directly or view it on GitHub.

[cvrebert]

You didn't update the HTML; v3 requires somewhat different markup. For example, container-fluid was renamed to container, etc.

[cvrebert]

Also, you have unescaped <, ", and > in your data-content value.

[ghost]

Never had to do this before. Escape with backslashes?

Thanks!

Rev. Steve Willis Director of Software Development Life Christian University P.O. Box 272360 Tampa, Fl 33688 (928) 899-9895

CONFIDENTIALITY NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message.

On Jul 11, 2013, at 11:03 AM, Chris Rebert notifications@github.com wrote:

Also, you have unescaped < and > in your data-content value.

— Reply to this email directly or view it on GitHub.

[cvrebert]

No, character entity references. See http://en.wikipedia.org/wiki/HTML#Character_and_entity_references Welcome to the Web.

[ghost]

Know what entities are and use them a lot. Just didn't know they were required here.

Thanks!

Steve

On Jul 15, 2013, at 4:44 PM, Chris Rebert notifications@github.com wrote:

No, character entity references. See http://en.wikipedia.org/wiki/HTML#Character_and_entity_references Welcome to the Web.

— Reply to this email directly or view it on GitHub.

[ghost]

Escaped the < and > in the data-content argument. No joy!

http://jsbin.com/otahaz/18/edit

Thanks!

Steve

On Jul 11, 2013, at 11:03 AM, Chris Rebert notifications@github.com wrote:

Also, you have unescaped < and > in your data-content value.

— Reply to this email directly or view it on GitHub.

[jlslew]

@unpocoloco Tried with this Bootstrap.js file, the included one is version 2.3.2

[ghost]

I don't understand this msg. Please clarify?

Whenever I try to paste the 3.0 version of bootstrap.js into jsBin, it tells me that there are 50 errors and refuses to run the code.

Steve

On Jul 15, 2013, at 5:51 PM, Jonathan Lee Slew notifications@github.com wrote:

Tried with this Bootstrap.js file, the included one is version 2.3.2

— Reply to this email directly or view it on GitHub.

[jlslew]

@unpocoloco I edited your jsBin http://jsbin.com/otahaz/21/edit

• <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> is not needed in V3
• <script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script> this is V2.3.2

[ghost]

But did it continue to work on the 2nd+ tries? And what browser/OS were you using?

Failed on the first try for me using your edited code. See attached screenshot. MacOS/Safari

BTW, have successfully used Bootstrap popovers in another page, several with text-only content, one with HTML content. All worked perfectly. The HTML popover had no image in it, only text. Perhaps the presence of an image is part of the problem somehow?

Thanks!

Steve

Rev. Steve Willis Director of Software Development Life Christian University P.O. Box 272360 Tampa, Fl 33688 (928) 899-9895

CONFIDENTIALITY NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message.

On Jul 18, 2013, at 12:33 PM, Jonathan Lee Slew notifications@github.com wrote:

@unpocoloco I edited your jsBin http://jsbin.com/otahaz/21/edit

[cvrebert]

Ok, I grant you that the vertical alignment of the arrow appears to be slightly off: http://jsfiddle.net/wFHG4/20/

[ghost]

Your code, my browser (Safari v6.0.5 (8536.30.1) /MacOS 10.8.4 )

Please see attached.

Steve

Rev. Steve Willis Director of Software Development Life Christian University P.O. Box 272360 Tampa, Fl 33688 (928) 899-9895

CONFIDENTIALITY NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message.

On Jul 23, 2013, at 10:18 PM, Chris Rebert notifications@github.com wrote:

Ok, I grant you that the vertical alignment of the arrow appears to be slightly off: http://jsfiddle.net/wFHG4/20/

— Reply to this email directly or view it on GitHub.

[cvrebert]

There is nothing attached. May I recommend that you reply via the GitHub website rather than email? (The long disclaimer in your email signature is also rather annoying.)

[ghost]

I never liked that signature disclaimer anyway and the lawyer who wrote it is no longer with our organization, so I removed it. Sorry! :-)

please see attached

Steve

Rev. Steve Willis Director of Software Development Life Christian University P.O. Box 272360 Tampa, Fl 33688 (928) 899-9895

On Jul 24, 2013, at 1:59 PM, Chris Rebert notifications@github.com wrote:

There is nothing attached. May I recommend that you reply via the GitHub website rather than email? (The long disclaimer in your email signature is also rather annoying.)

— Reply to this email directly or view it on GitHub.

[cvrebert]

GitHub doesn't accept email attachments, apparently. Please upload your screenshot via the web comment form.

[fat]

i feel pretty good about the positioning stuff in v3 right now. so im closing this issue.

If someone wants to open a jsfiddle (or better, a unit test :heart:) with the latest v3 as of july 25 which demonstrates a problem with the positioning logic that would be super appreciated though.