Tooltip

A lightweight tooltip directive that provides contextual information on hover. Built with Angular signals and overlay system, it offers flexible positioning and seamless integration with any HTML element.

Import

import {FktTooltipDirective} from "frakton-ng/tooltip";

Basic

Simple tooltip implementation with basic text content and hover interaction.

Positioning

Tooltip positioning examples showing all available position options.

Top Positions

Bottom Positions

Side Positions

Corner Positions


	
		
		
			Top Positions
			
				

				

				
			
		

		
		
			Bottom Positions
			
				

				

				
			
		

		
		
			Side Positions
			
				
					

					

					
				

				
					

					

					
				
			
		

		
		
			Corner Positions

Interactive

Advanced tooltip examples with different colors and overflow detection.

Interactive tooltip element


	
		
			
				Interactive tooltip element

Different elements

Tooltips applied to various UI elements like buttons, icons, and text.

Buttons

Icons

Badges

New

Beta

Popular

Text Elements

Hover over this text

Technical Term

Interactive Elements

Custom Card

Status Indicators


	
		
			Buttons
			
				

				

				
			
		

		
			Icons
			
				

				

				

				
			
		

		
			Badges
			
				

				

				
			
		

		
			Text Elements
			
				
					Hover over this text
				

				
              Technical Term
            
			
		

		
			Interactive Elements
			
				
					?
				

				
					Custom Card
				
			
		

		
			Status Indicators