
Security News
Opengrep Adds Apex Support and New Rule Controls in Latest Updates
The latest Opengrep releases add Apex scanning, precision rule tuning, and performance gains for open source static code analysis.
ng2-tooltip-directive-major-angular-updates
Advanced tools
Note: I am not the author of this project, see their [official repository].(https://github.com/drozhzhin-n-e/ng2-tooltip-directive). The author doesn't seem to maintain its project anymore, so I'm just fixing stuff to update to new angular versions.
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
This version of the library support Angular version 15 and up.
Install the npm package.
npm i ng2-tooltip-directive-major-angular-updates
Import NgModule
:
import { TooltipModule } from 'ng2-tooltip-directive-major-angular-updates';
@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-major-angular-updates";
export const MyDefaultTooltipOptions: TooltipOptions = {
"show-delay": 500,
};
And pass your parameters when importing the module:
import { TooltipModule, TooltipOptions } from 'ng2-tooltip-directive-major-angular-updates';
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. If 'auto', then it will also delay hiding if the tooltip content is being hovered upon or focused. |
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 |
Do you want to contribute? What are you waiting for? Create a PR and tag me, and we can work together.
FAQs
Tooltip for Angular
We found that ng2-tooltip-directive-major-angular-updates demonstrated a not healthy version release cadence and project activity because the last version was released 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
The latest Opengrep releases add Apex scanning, precision rule tuning, and performance gains for open source static code analysis.
Security News
npm now supports Trusted Publishing with OIDC, enabling secure package publishing directly from CI/CD workflows without relying on long-lived tokens.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.