Tooltip is a small "hover box" containing information about the item being hovered over. Tooltip appears on hover over an element with the cursor, or focus on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI.

Bootstrap Tooltip Propeller Tooltip

Bootstrap Tooltip

It is an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage. Tooltip with zero-length titles is never displayed.

code 

                            

                            

                                

                            

                            

                                
 
                            

                        

                    

                        
                    
                    

                        

                            

                                

                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                

                            

                        

                    

                    
                

            

            
        


        
        

        
        	
            

                

                    
Propeller Tooltip

                

				
Propeller tooltip uses basic Bootstrap Tooltip customized with Material Standards. To initialize the Propeller Tooltip, add the HTML attribute data-toggle="tooltip". Add .pmd-tooltip to apply propeller theme and animations. To define the tooltip position, use data-placement attribute. data-placement attribute can take left, right, top and bottom as values.

               
            

            
            
            

                

                
                	
                    

                        code
                    

                    
                    
                    

                    	

                        	
  
                            
                        

                    	

                            

                                

                            

                            

                                

                            

                            

                                
 
                            

                        

                    

                        
                    
                    

                        

                            

                                

                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                

                            

                        

                        

                            
Hover over the link below to see tooltip

                            

                                

                                    
Propeller is the combination of Material Design and Bootstrap that makes your website more attractive, consistent, and functionally powerful. The Propeller components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. By using Propeller components, you can get basic structure of your design and also customise it easily. 

                                

                            

                        

                    

                    
                

            

            
        

        
                
        

            

                

                    
Configuration Options

                

                
 The table lists some HTML attributes that are required for positioning and styling of the tooltip.

            

            
            

                

                    

                            

                                
                                    

                                        Propeller  Class
                                        Effect
                                        Remark
                                    

                                
                                
                                    

                                        .pmd-tooltip
                                        Defines Propeller theme and animation.
                                        Required
                                    

                                
                            

                        

                

                

					
  
                        

                            
                                

                                    HTML Attributes
                                    Effect
                                    Value
                                

                            
                            
                                

                                    data-toogle
                                    To initialize tooltip. 
                                    tooltip
                                

                                

                                    data-placement
                                    Defines the position of the tooltip. Values that can be provided are left, right, top or bottom. 
                                    left, right, top, bottom
                                

                                

                                    title
                                    Defines the content of the tooltip.
                                    text, HTML
                                

                            
                        

                    

                

            

        

        
        
                
        

            

                

                    
Events

                

                
See here for more documentation on this.

            

            

                
                

					
  
                        

                            
                                

                                    Event Type
                                    Description
                                

                            
                            
                                

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

                                

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

                                

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

                                

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

                                

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