0

Here is my jsFiddle with full code.

If you hover over the Sign In | Register link you'll see a little popup. I am trying to accomplish 2 things with this:

  • Replace the text "Replace this with a login form" with an actual form (see screenshot below); and
  • Make the popup larger to support the size of the form (all attempts to make it larger than what you see have failed).

I am modeling my sign in/register form after this:

enter image description here

The current functionality is accomplished via the following HTML:

<li class="signin">
    <a id="popoverData" href="#" data-content="Replace this with a login form" rel="popover" data-placement="bottom" data-original-title="Sign in to your account" data-trigger="hover">Sign In | Register</a>
</li>

Along with the following JS:

$('#popoverData').popover();

For one, I might be using the wrong tool for the job here (popovers). So if there is a better mechanism/construct in Bootstrap 3 that I should be using for this, then please let me know! If I am on the right track here, if data-content is the only field I have to customize the text the user sees on mouseover/hover, then how do I inject an entire sign in/register form into this, as it is only a string attribute?!?

creimers
  • 4,975
  • 4
  • 33
  • 55
smeeb
  • 27,777
  • 57
  • 250
  • 447

1 Answers1

2

if you set the popover to allow html like this:

data-html="true"

then you can use html in the data-content attribute like this:

data-content="<input class='form-control' placeholder='username'>"

Here's a bootply example: http://www.bootply.com/Ho8JrccO69

You will probably also want to change the trigger from 'hover' to 'click' so that the popover stays open.

EDIT

To change the width of the popover: Changing the width of Bootstrap popover

To change the styling or color you could either override the bootstrap popover css (site wide) or you could change the template for this popover using the template option (example below is the default template):

data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'

To set the popover content to the html of a form that already exists on the page you could initialize it using javascript:

$('#popover').popover({ 
    content: function() {
      return $("#my-form").html();
    }
});

To destroy the popover on click away: How to dismiss a Twitter Bootstrap popover by clicking outside?

Community
  • 1
  • 1
ChaoticNadirs
  • 2,280
  • 2
  • 20
  • 27
  • Thanks @ChaoticNadirs (+1) - a few followup questions: (1) how do I make the popover wider, and how (in general) can I change its styling/color scheme? (2) What if my login form is fairly complex; is there a way to make `data-content` reference some other `
    ` defined elsewhere? If not, can I assume the next best alternative would be to provide a JS function to write my login form (so, `data-content="renderForm();"`)? And finally (3) how can I configure this popover to destroy itself if the user clicks on anything outside of it (currently it stays rendered until you click the link again).
     – smeeb Oct 22 '14 at 08:45
  • Thanks again @ChaoticNadirs - awesome answer, I wish I could upvote you more! – smeeb Oct 22 '14 at 09:24