ngx-custom-tooltip

ngx-custom-tooltip

About

Simple and customizable tooltip/pop-up component for Angular projects.
It can be used as a tooltip (it closes when you click outside of it), or as a pop-up with a close button.
It has a ng-content tag, so you can place all kinds of html elements inside them.

Compatibility

NgxCustomTooltip	Angular
0.x.x	^9.0.0
1.0.x	=> 9.0.0 <= 10.2.x
1.1.x	=> 9.0.0 <= 11.0.0
1.2.x	=> 9.0.0 <= 12.0.0
1.3.x	=> 9.0.0 < 14.0.0
2.0.x	^14.0.0
2.1.x	=> 14.0.0 < 16.0.0
2.2.x	=> 14.0.0 < 17.0.0
2.3.x	=> 14.0.0 < 18.0.0
2.4.x	=> 14.0.0 < 19.0.0
2.5.x	=> 14.0.0 < 20.0.0
3.0.x	=> 17.0.0 < 21.0.0

Get Started

Step 1: Install ngx-custom-tooltip

npm install ngx-custom-tooltip

Step 2: Import NgxCustomTooltipModule module into your app.module.ts or into a specific module where you want to use it.

....
import { NgxCustomTooltipModule } from 'ngx-custom-tooltip';
....
@NgModule({
  ...
  imports: [
    ....
    NgxCustomTooltipModule
  ],
  ....
})
export class AppModule { }

If you have a standalone app instead, import the NgxCustomTooltipComponent into your example.component.ts.

....
import { NgxCustomTooltipComponent } from 'ngx-custom-tooltip';
....
@Component({
  ...
  standalone: true,
  imports: [
    ....
    NgxCustomTooltipComponent,
  ],
  ....
})
export class ExampleComponent { }

Step 3: Wrap ngx-custom-tooltip tag around your elements in your example.component.html file

<button #target>Open</button>
<ngx-custom-tooltip [target]="target" (closeEmitter)="handleClose($event)">
  <p>This is a tooltip message!</p>
</ngx-custom-tooltip>

Options

Attribute	Type	Default value	Description
bgColor	string	'#ffffff'	background-color property for the tooltip.
borderColor	string	'#d3d3d3'	border-color property for the tooltip.
borderRadius	string	'4px'	border-radius property for the tooltip. Accepts css syntax.
closeButton	boolean	false	Indicates if the tooltip has a close button. If false, it closes when you click outside of it.
closeButtonImage	string	undefined	Image path for close button.
closeButtonMargin	string	'20px'	Separation of the close button from the border. By default it is placed in the upper right corner. Accepts css syntax.
closeButtonSize	string	'20px'	height and width properties for the close button. Accepts css syntax.
displacement	number	0	Arbitrary offset of the tooltip from its target. It is ignored if a center type position is chosen.
floatingSize	number	3	Move the tooltip away from its target.
maxHeight	string	'max-content'	Maximum height, after that, a vertical scroll appears. Accepts css syntax.
maxWidth	string	'max-content'	Maximum width, after that, a horizontal scroll appears. Accepts css syntax.
minHeight	string	'auto'	Minimum height for the tooltip. Accepts css syntax.
minWidth	string	'auto'	Minimum width for the tooltip. Accepts css syntax.
padding	string	'8px'	padding property for the tooltip. Accepts css syntax.
popUpPosition	PopUpPositionKey	'topCenter'	The position of the tooltip.
target	HTMLElement	undefined	The HTMLElement that activates the tooltip. If closeButton is false the target is excluded for the clickout event that close the button.
triangleBgColor	string	undefined	background-color property for the triangle. If not provided, bgColor is used.
(closeEmitter)	boolean		Emit false when tooltip is closed.

Report Issues

If you find any issues or have suggestions for improvement, please report them here.

When reporting an issue, include:

• Clear description of the problem
• Angular and library version you're using
• Steps to reproduce the issue
• Expected behavior vs actual behavior
• Screenshots or code examples if possible

License

This project is under the MIT license. See the LICENSE file for more details.

Author

Valdemar Farina

• GitHub: @valdefreaks