Bootstrap popover on right

by Alessandro Vernet

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<div id="popover-container"></div>
<input id="first-name"></input>

CSS

#popover-container { 
    position: absolute;
    left: -10000px;
    right: 20px;
}

body .tooltip-inner, body .popover {
    max-width: none;
}

#first-name { 
    margin: 20px 0 0 20px;
    width: 400px;
}

JavaScript

$.fn.popover.Constructor.prototype.arrow = function() {
    //return this.$arrow = this.$arrow || this.tip().find(".arrow");
}

$('#first-name').popover({
    placement: 'right',
    container: '#popover-container',
    content: 'A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename. A person\'s given name, in Western contexts often referred to as a first name or forename.'
}).popover('show');