breaking into the unknown…

bootstrap popover

Leave a comment

Bootstrap provide a number of js plugin listed here. Here I will create a popover to display message about the input to be filled,when a user try to enter something in it. Let us first define a input field on which we implement popover.

In ruby on rails it has below syntax.

<%=text_field_tag "routing_number", @loan[:RoutingNumber] , 
'data-content'=>"Routing Number is a 9 digit number starting with 0, 1, 2 or 3.",

The important point above to note is the use of data attribute to add any value to a html element in unobtrusive way. Any property provided by bootstrap can be added in this way (i,e ‘data-property’ => ‘value’). I have set the property content and placement in the above code. the value set to data-content will give the text to be shown in the popover and data-placement will decide whether it appears right left top or bottom.Other available property for popover listed here is animation , html, selector, trigger, title, delay and container .

The above code in pure html can be written as below

<input type="text"  name="routing_number" id="routing_number" 
data-content="Routing Number is a 9 digit number starting with 0, 1, 2 or 3." data-original-title=""

Now we will write our jQuery code to add popover on the input. When a user type a character, popover will appear with the message. It will be removed when he click anywhere out side i,e if input get blur

var showpopup = function(){

var hidepopup = function(){

$("#routing_number").keypress(showpopup); # will show the popover on enter of a charecter
$("#routing_number").blur(hidepopup); # will hide the popover

The other event available for popover besides show and hide is destroy and toggle . Also note the use of jQuery events keypress and blur . other event listed here is change(), focusin(), select(), submit() .


Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s