dlink-tooltip

dLinkTooltip

This library was generated with Angular CLI version 15.1.6 - 19.2.14.

🧠 dlink-tooltip -By JBORAD988

dlink-tooltip is a lightweight, highly customizable Angular tooltip library designed to enhance UX without relying on heavy CSS hacks. Ideal for enterprise-level applications where UI clarity and control matter.

🧪 Beta Features

• Hide when filed out-of canvas Always visible Tooltip auto hide when the tooltip goes out of the browser's viewable area.

• Full Implementation of html Elemnets Now you can show full HTML just like any other HTML elements example Table, grid, etc... (form supports might be avalible for publicly in future Realease)

• Live Tooltip Updates Tooltip content now updates in real-time, ensuring the latest data is always displayed.

• Responsive Tooltip Positioning Tooltips now dynamically adjust their position during screen zoom or scroll events for improved visibility and user experience.

🔗 Live Demo

Experience the new tooltip features in action: 👉 View D-Link Tooltip Live Demo

🚀 Why Use dlink-tooltip?

Hardcoded CSS tooltips are:

• ❌ Difficult to maintain
• ❌ Not reusable
• ❌ Often break on responsive layouts
• ❌ Limited in positioning and interactivity

dLink offers:

• ✅ Smart positioning to avoid clipping
• ✅ Multiple trigger types (hover, click, focus, manual)
• ✅ Rich content support (HTML, templates)
• ✅ Built-in theme system (dark, light, custom)
• ✅ Advanced animation system (fade, slide, scale)
• ✅ Event callbacks and manual control(in future updates)
• ✅ Accessibility features (ARIA, keyboard navigation)
• ✅ Touch gesture support for mobile
• ✅ Auto-hide and persistent tooltip options
• ✅ Adjustable gap, size, alignment, delay, offset
• ✅ Configurable animations and custom styles
• ✅ No external dependencies, built natively with Angular

🧱 Installation (Recommended: LTS for Best Compatibility)

npm install dlink-tooltip

⚠️ We recommend using a dLink LTS version to avoid dependency conflicts or bugs and ensure smoother integration.

🔁 Import the Module

import { DLinkModule } from 'dlink-tooltip';

@NgModule({
  imports: [ DLinkModule ]
})
export class YourModule { }

🌐 Angular Compatibility

dLink Version	Angular Version
0.0.1 - 1.0.3	15.1.6
16.0.0	16.2.12
17.0.0	17.3.12
18.0.0	18.2.13
Latest	19.2.14

⚙️ Tooltip Directive Usage

Basic Usage

<!-- Simple tooltip -->
<button dLinkTooltip="This is a tooltip">Hover me</button>

Advanced Usage

<button
  dLinkTooltip="<strong>Rich HTML</strong> content"
  [tooltipHtml]="true"
  tooltipTheme="light"
  tooltipAnimation="scale"
  tooltipTrigger="click"
  [tooltipPosition]="'top-right'"
  [tooltipFontSize]="'14px'"
  [tooltipGap]="8"
  [tooltipAlign]="'left'"
  [tooltipMaxWidth]="'200px'"
  [tooltipClass]="'custom-tooltip'"
  [tooltipSmartPosition]="true"
  [tooltipSpeed]="'fast'"
  [tooltipShowDelay]="200"
  [tooltipHideDelay]="100"
  [tooltipAutoHide]="3000"
  [tooltipPersistent]="false"
  [tooltipShowOnLoad]="false"
  [tooltipOffset]="{x: 10, y: 5}"
  [tooltipTouchGestures]="true"
  tooltipAriaLabel="Additional info"
  (tooltipShow)="onShow()" //Info: In future updates 
  (tooltipHide)="onHide()" //Info: In future updates 
>
  Advanced Tooltip
</button>

📥 Directive Inputs / Properties

Core Properties

Input	Type	Default	Description
dLinkTooltip	string	''	The text/content shown in the tooltip
tooltipPosition	'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'top'	Tooltip placement
tooltipTrigger	'hover' | 'click' | 'focus'	'hover'	How tooltip is triggered
tooltipTheme	'dark' | 'light' | 'custom'	'dark'	Built-in theme or custom styling
tooltipAnimation	'fade' | 'slide' | 'scale' | 'none'	'fade'	Animation type for show/hide
tooltipSpeed	'fast' | 'medium' | 'slow'	'medium'	Animation speed

Content & Styling

Input	Type	Default	Description
tooltipHtml	boolean	false	Enable HTML content rendering
tooltipFontSize	string	'14px'	Font size of tooltip content
tooltipMaxWidth	string	'200px'	Max width of the tooltip
tooltipAlign	'center' | 'left' | 'right'	'center'	Tooltip alignment relative to element
tooltipClass	string	''	Custom CSS class for additional styling

Positioning & Layout

Input	Type	Default	Description
tooltipGap	number	8	Distance between tooltip and element
tooltipOffset	{x: number, y: number}	{x:0, y:0}	Additional X/Y offset for fine positioning
tooltipSmartPosition	boolean	true	Auto-adjust if tooltip goes out of viewport

Timing & Behavior

Input	Type	Default	Description
tooltipShowDelay	number	0	Delay before showing tooltip (ms)
tooltipHideDelay	number	0	Delay before hiding tooltip (ms)
tooltipAutoHide	number	0	Auto-hide after milliseconds (0 = disabled)
tooltipPersistent	boolean	false	Keeps tooltip visible until manually hidden
tooltipShowOnLoad	boolean	false	Shows tooltip as soon as component loads

Accessibility & Touch

Input	Type	Default	Description
tooltipTouchGestures	boolean	true	Enable touch gesture support
tooltipRole	string	'tooltip'	ARIA role attribute
tooltipAriaLabel	string	''	ARIA label for accessibility

Output Events

Event	Type	Description
tooltipShow	EventEmitter<void>	Emitted when tooltip is shown
tooltipHide	EventEmitter<void>	Emitted when tooltip is hidden

Public Methods (In Future Updates - currently not available)

Method	Description
showTooltip()	Programmatically show the tooltip
hideTooltip()	Programmatically hide the tooltip
toggleTooltip()	Toggle tooltip visibility

🎯 Feature Examples

Trigger Types

<!-- Hover trigger (default) -->
<button dLinkTooltip="Hover tooltip" tooltipTrigger="hover">Hover me</button>

<!-- Click trigger -->
<button dLinkTooltip="Click tooltip" tooltipTrigger="click">Click me</button>

<!-- Focus trigger -->
<input dLinkTooltip="Focus tooltip" tooltipTrigger="focus" placeholder="Focus me">

Themes

<!-- Dark theme (default) -->
<button dLinkTooltip="Dark theme tooltip" tooltipTheme="dark">Dark</button>

<!-- Light theme -->
<button dLinkTooltip="Light theme tooltip" tooltipTheme="light">Light</button>

<!-- Custom theme -->
<button dLinkTooltip="Custom theme tooltip" tooltipTheme="custom" tooltipClass="my-custom-tooltip">Custom</button>

Animations

<!-- Fade animation (default) -->
<button dLinkTooltip="Fade animation" tooltipAnimation="fade">Fade</button>

<!-- Slide animation -->
<button dLinkTooltip="Slide animation" tooltipAnimation="slide">Slide</button>

<!-- Scale animation -->
<button dLinkTooltip="Scale animation" tooltipAnimation="scale">Scale</button>

<!-- No animation -->
<button dLinkTooltip="No animation" tooltipAnimation="none">None</button>

HTML Content

<!-- Plain text -->
<button dLinkTooltip="Plain text tooltip">Plain Text</button>

<!-- HTML content -->
<button dLinkTooltip="<strong>Bold</strong> and <em>italic</em> text" [tooltipHtml]="true">HTML Content</button>

<!-- Rich HTML -->
<button dLinkTooltip="<div style='color: #ff6b6b;'>🎨 Styled HTML</div><br><small>With line breaks</small>" 
        [tooltipHtml]="true">Rich HTML</button>

Event Handling

export class MyComponent {
  onTooltipShow() {
    console.log('Tooltip shown!');
  }

  onTooltipHide() {
    console.log('Tooltip hidden!');
  }
}

<!-- Info: In future updates currently not available  -->
<button dLinkTooltip="Event tooltip" 
        (tooltipShow)="onTooltipShow()" 
        (tooltipHide)="onTooltipHide()"> 
  Events Tooltip
</button>

Persistent & Auto-hide

<!-- Persistent tooltip -->
<div dLinkTooltip="This tooltip stays visible!" 
     [tooltipPersistent]="true" 
     [tooltipShowOnLoad]="true" 
     tooltipPosition="right">
  Persistent tooltip
</div>

<!-- Auto-hide tooltip -->
<button dLinkTooltip="Auto-hide after 3 seconds" 
        [tooltipAutoHide]="3000">
  Auto Hide
</button>

Positioning & Offset

<!-- All position options -->
<button dLinkTooltip="Top tooltip" tooltipPosition="top">Top</button>
<button dLinkTooltip="Top-left tooltip" tooltipPosition="top-left">Top-Left</button>
<button dLinkTooltip="Top-right tooltip" tooltipPosition="top-right">Top-Right</button>
<button dLinkTooltip="Bottom tooltip" tooltipPosition="bottom">Bottom</button>
<button dLinkTooltip="Bottom-left tooltip" tooltipPosition="bottom-left">Bottom-Left</button>
<button dLinkTooltip="Bottom-right tooltip" tooltipPosition="bottom-right">Bottom-Right</button>
<button dLinkTooltip="Left tooltip" tooltipPosition="left">Left</button>
<button dLinkTooltip="Right tooltip" tooltipPosition="right">Right</button>

<!-- With offset -->
<button dLinkTooltip="Offset tooltip" [tooltipOffset]="{x: 20, y: 10}">Offset</button>

Accessibility

<button dLinkTooltip="Accessible tooltip" 
        tooltipAriaLabel="Additional accessibility information"
        tooltipRole="tooltip">
  Accessible Tooltip
</button>

Complex Example

<button 
  dLinkTooltip="<div style='text-align: center;'><strong>🚀 Advanced Tooltip</strong><br><em>Multiple features combined</em><br><small style='color: #888;'>HTML + Theme + Animation</small></div>"
  [tooltipHtml]="true"
  tooltipTheme="light"
  tooltipAnimation="scale"
  tooltipSpeed="slow"
  tooltipPosition="top"
  [tooltipShowDelay]="300"
  [tooltipHideDelay]="200"
  tooltipMaxWidth="250px"
  [tooltipOffset]="{x: 0, y: -5}">
  🎯 Complex Tooltip
</button>

Custom Styling

// Custom theme CSS
.my-custom-tooltip {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  font-weight: 600 !important;
}

🛠 Development Commands

Generate Components

ng generate component component-name --project rx-tooltip

Always use --project rx-tooltip to scope to the library

Build the Library

ng build rx-tooltip

Publish to npm

cd dist/rx-tooltip
npm publish

Run Unit Tests

ng test rx-tooltip

🔗 Additional Resources

• Angular CLI Docs
• Tooltip Best Practices (UX)