Forums

DesignLady94

Could someone help me set up a static popover using Bootstrap as shown here: http://twitter.github.com/bootstrap/javascript.html#popovers? I can't figure out how and where to set up up the data attribute to bring in the content.

I've tried using their suggested js too but that doesn't seem to work either.

  <div class="bs-docs-example bs-docs-example-popover">
      <div class="popover top">
          <div class="arrow"></div>
          <h3 class="popover-title">Popover top</h3>
          <div class="popover-content">
            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
          </div>
      </div>
  </div>

JS:

  $('#example').popover(options)

TheDoc

For whatever reason, this forum really doesn't like how you insert code - I keep on having to go into your posts and fixing it! Can you send me a PM with what your process is - you might not be doing anything wrong, might just be our system - thanks!

DesignLady94

oh I'm so sorry Doc! I am just clicking the blue Code link above the comment box and pasting the code in.

TheDoc

I think you just go like this:

HTML:

  <a href="#" class="your-class" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</a>

JS:

  $('.your-class').popover();

DesignLady94

It seemed to work okay when I posted code in a PM, but not here...

DesignLady94

You mean just paste the code in without clicking the Code link?

TheDoc

Paste the code in, highlight it and then click the 'Code' button - that should work!

Back to your problem, though, did you see my example?

DesignLady94

oh! I was doing it backwards..let me try it here. I'm new to this forum.

<

div class="bs-docs-example bs-docs-example-popover">

TheDoc

Also remember that if you're having problems posting your code you can always post it on Codepen. Here's a guide: http://css-tricks.com/forums/discussion/comment/87079

DesignLady94

Didn't work :( Is there a way to delete comments?

And I tried your popover code...that didn't work either...Keep in mind that I am not wanting to click anything...I just want it to show up as a static popover.

I'd post the html but don't want it to mess up again.

DesignLady94

I've tried codepen...but I don't see any place to enter resource docs, like bootstrap.css as you can do in JS Fiddle.

DesignLady94

Let me try the html here cause I think that's where I am having the problem.

  $('.refer').popover();

TheDoc

The best way for us to diagnose the problem is with a link to the website that you're working on, specifically to the page where the issue is.

DesignLady94

arggg...I forgot to post that. http://www.debbierking.com/bootstrap/refer.php

TheDoc

And where are the popovers supposed to occur?

DesignLady94

on this page. See the static popover examples at http://twitter.github.com/bootstrap/javascript.html#popovers.

DesignLady94

I want to replace the paragraphs on the refer.php page with popovers containing the contact. Then I would list the cite reference below.

DesignLady94

Actually no, I would include the reference as the popover title.

TheDoc

I mean on this page: http://www.debbierking.com/bootstrap/refer.php

Where do you have the attempted popovers?

TheDoc

Hmmmmm. Basically I'm trying to figure out where you're attempted code is.

DesignLady94

Right under the Testimonials title.

TheDoc

All I see are paragraphs and links.

Have you:

a) included the necessary Bootstrap JS/CSS b) updated your markup with the code shown on the Bootstrap example page

All I see is this: http://cl.ly/image/2w0e0e1X1K0V

So I don't know where your popover is supposed to occur.

DesignLady94

That's right...I don't know why the popover isn't displaying. I have used the code that I pasted above. I did include the bootstrap.css file...I don't think I need any other css bootstrap files, as I didn't need one for the accordion function.

Can you view my source code on the refer.php page? You will see the popover code there...it should be showing up right under the header on the left-hand side of the page.

DesignLady94

If we can't figure this out soon I think I'm going to give up on the popovers...they are not necessary...just would look nice. I'd rather concentrate more on why the internal link isn't working in Firefox.

TheDoc

Oohhhh. Are you supposed to hover over the 'Testimonials' title and see it?

DesignLady94

No...maybe I am misunderstanding how this works....I thought from the example of static popovers on the Bootstrap page that they were just supposed to display with no clicking or anything. But nothing is showing up...I have been going round on this for a couple of days now.

TheDoc

Ooohhhh. They are meant to be initialized by something with JS.

Yours isn't showing because it's set to display: none;. Having said that, you shouldn't actually be writing any markup as it's all done with the data attributes.

So what you could do, using the 'Testimonials' title as our reference, is this:

  <h2 class="your-toggle" data-placement="top" data-content="This is my content test.">Testimonials</h2>

JS:

  $('.your-toggle').popover('show');

TheDoc

I just tried the above on your site using Inspector and it worked perfectly.

DesignLady94

I see...it's showing up now (I thought the 'show' option was for clicking on a button to display the popover.

I am now trying to figure out how to bring the title into the popover.

I am noticing that when I add the popover for the second reference it replaces the first....I think I'm going to give up on this...thanks for trying to help me out though!

DesignLady94

Am going with straight CSS to create the bubble. Thanks again Doc!

treehouse : what would you like to learn today?

Forums

Bootstrap Static Popovers

Popover top

Popover top