Popover is similar to tooltips; it is a pop-up box that appears when user click or hover on an element.

Popover On Click Popover On Hover Configuration Options Events

Popover On Click

To make the Popover open on click, use data-trigger="click". To specify the direction of Popover use attribute data-placement with left, right, top, and bottom values.

code 

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
								

							

						

					
 
				

                
                
                

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
								

							

						

					
 
					
				

                
Popover on Click with Title. Use attribute title to add title to the Popover.

			
 
		
 
		
		
		

			
			
			

				

					
Popover On Hover

				

				
To make your Popover open on hover, use data-trigger="hover".

			
 
			
			
			
 
				

					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
									
								

							

						

					
 
					
				

                
                
                

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
								

							

						

					
 
					
				

                
Popover on hover with Inline HTML. Use attribute data-html="true" to add inline HTML to the Popover.

                
                
                

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					 
					

						
 
							

								

									
									
									
									
									
									
									
									
									
								

							

						

					
 
					
				

				
Popover on hover with External HTML. Use attribute title to add external HTML to the Popover.

                
                
                

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

							

								

							

						

					
 
					
					
					

						
 
							

								
 
									
									
									
									
								

							

						

					
 
					
				

                
Popover on hover with contextual color option. Use attribute data-color to add external HTML to the popover. For example: data-color="success" adds green color to the Popover.

			
 
		
 
		
				
		

			

				

					
Configuration Options

				

				
The Propeller CSS classes apply various predefined visual enhancements to the Popover. The table lists the available classes and their effects.

			

			

				

					
 
						
						

							
								

									Propeller Classes
									Effect
									Remark
								

							
							
								

									.popover-html
									To load dynamic HTML inside Popover
									Optional
								

							
						

						 
					

				

				

					
 
						
						

							
								

									HTML Attributes
									Effect
									Value
								

							
							
								

									data-toggle
									To initialize Popover
									Popover
								

								

									data-trigger
									Defines how the Popover opens.
									hover, Click
								

								

									data-placement
									Defines the position of Popover vertically and horizontally.
									left, right, top, bottom
								

								

									data-content
									Defines content of the Popover.
									text, HTML
								

								

									data-html
									Required when your Popover contains HTML in it.
									true, false
								

								

									data-id
									To load outer HTML
									HTML element ID
								

								

									data-original-title
									Defines the title content of Popover.
									text
								

								

									data-color
									Used for colored Popover.
									primary, default, success, danger, info, warning
								

							
						

						 
					

				

			

		
  		
		
				
		

			

				

					
Events

				

				
See here for more documentation on this.

			

			
 
				
				

					

						

							
								

									Event Type
									Description
								

							
							
								

									show.bs.popover
									This event fires immediately when the show instance method is called.
								

								

									shown.bs.popover
									This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
								

								

									hide.bs.popover
									This event is fired immediately when the hide instance method has been called.
								

								

									hidden.bs.popover
									This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
								

								

									inserted.bs.popover
									This event is fired after the show.bs.popover event when the Popover template has been added to the DOM.