Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@amin-karimi/ng2-tooltip-directive
Advanced tools
Readme
V1.0.3 for Angular 14.2
V2.0.1 for Angular 15.0.4
V3.0.2 for Angular 16.0.5
V4.0.0 for Angular 17.0.9
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
🔬️ Help make Tooltips better by answering a few questions.
Install the npm package.
// npm i ng2-tooltip-directive
npm i @amin-karimi/ng2-tooltip-directive
Import Ng2Module
:
//import { TooltipModule } from 'ng2-tooltip-directive';
import { TooltipModule } from '@amin-karimi/ng2-tooltip-directive';
@NgModule({
imports: [ TooltipModule ]
})
Options can be set in the directive tag, so they have the highest priority.
<span tooltip="Tooltip" placement="top" showDelay="500">Tooltip on top</span>
You may pass as an object:
<span tooltip="Tooltip" [options]="myOptions">Tooltip on left</span>
myOptions = {
'placement': 'left',
'showDelay': 500
}
You can pass HTML as content :
<span tooltip="<p>Hello i'm a <strong>bold</strong> text!</p>">
Tooltip with HTML content
</span>
<ng-template #HtmlContent>
<p>Hello i'm a <strong>bold</strong> text!</p>
</ng-template>
<span [tooltip]="HtmlContent" contentType="template">
Tooltip with template content
</span>
Create a file with your settings, for example:
import { TooltipOptions } from 'ng2-tooltip-directive';
export const MyDefaultTooltipOptions: TooltipOptions = {
'show-delay': 500
}
And pass your parameters when importing the module:
//import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive';
import { TooltipModule, TooltipOptions } from '@amin-karimi/ng2-tooltip-directive';
import { MyDefaultTooltipOptions } from './my-default-options';
@NgModule({
imports: [
TooltipModule.forRoot(MyDefaultTooltipOptions as TooltipOptions)
]
})
name | type | default | description |
---|---|---|---|
placement | "top", "bottom", "left", "right" | "top" | The position of the tooltip. |
autoPlacement | boolean | true | Place the tooltip so that it does not go beyond the borders of the browser window. |
showDelay | number | 0 | The delay in ms before showing the tooltip. |
hideDelay | number | 300 | The delay in ms before removing the tooltip. |
hideDelayTouchscreen | number | 0 | Delay in milliseconds before hiding the tooltip (for mobile devices). |
display | boolean | true | Tooltip availability for display. |
displayTouchscreen | boolean | true | Display the tooltip on mobile devices. |
zIndex | number | 0 | Z-index of the tooltip. |
trigger | "hover", "click" | "hover" | Specifies how the tooltip is triggered. Control the closing time with "hide-delay". |
tooltipClass | string | Classes to be passed to the tooltip. | |
animationDuration | number | 300 | The duration controls how long the animation takes to run from start to finish. |
theme | "dark", "light" | "dark" | Theme of tooltip background and text. |
shadow | boolean | true | Shadow of the tooltip. |
offset | number | 8 | Offset the tooltip relative to the item. |
width | number | undefined | Width of the tooltip. |
maxWidth | number | 200 | Maximum width of the tooltip. |
contentType | "string", "html', "template" | "string" | The content type passed to the tooltip. |
hideDelayAfterClick | number | 2000 | Tooltip hiding delay for "click" trigger. |
pointerEvents | "auto", "none" | "none" | Defines whether or not an element reacts to pointer events. |
position | {top: number, left: number} | undefined | The tooltip coordinates relative to the browser window. |
When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.
Event | Description |
---|---|
{type: "show", position: DOMRect} | The event is called before the tooltip appears. |
{type: "shown", position: DOMRect} | The event is called after the animation of the appearance of the tooltip. |
{type: "hide", position: DOMRect} | The event is called before the tooltip is hidden. |
{type: "hidden", position: DOMRect} | The event is called after the animation of the tooltip is hidden. |
If you specified the directive options, they will be taken into account when calling methods. Including the delay before the appearance and hiding of the tooltip.
Method | Description |
---|---|
show() | Shows the tooltip |
hide() | Hides the tooltip |
Are you interested in this library but lacks features? Write to the author,(https://github.com/Amin-Karimi), he can do it for you.
We use Browserstack for cross-browser testing.
FAQs
Tooltip for Angular
The npm package @amin-karimi/ng2-tooltip-directive receives a total of 357 weekly downloads. As such, @amin-karimi/ng2-tooltip-directive popularity was classified as not popular.
We found that @amin-karimi/ng2-tooltip-directive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.