Skip to content

Latest commit

 

History

History
59 lines (51 loc) · 1.48 KB

README.md

File metadata and controls

59 lines (51 loc) · 1.48 KB
Raw

angular-helptip

Helptip is a simple floating tooltip for angular

Instalation

$ yarn add angular-helptip

Include the files on your html

<head>
  <!-- ... -->
  <script type="text/javascript" src="vendor/angular-helptip/dist/angular-helptip.js"></script>
  <!-- ... -->
</head>

And finally add it to your application dependencies

angular.module('app', [ 'upp.helptip' ])

Usage

Add it as an attribute html

<div helptip="This is a helptip!"></div>

Also, if you are using angular-translate you can pass directly the translation key insetad of using the translate filter

<!-- These two are equivalent -->
<div helptip="tooltip.hint"></div>
<div helptip="{ 'tooltip.hint' | translate }"></div>

Futhermore, you can add a timeout for when the cursor leaves the element that triggered the tooltip to show. This way, the tooltip will not disapear until the given time has passed since the cursor left the element.

<div helptip="This is a helptip!"
	 helptip-timeout="2000">
</div>

Config

angular-helptip exposes a provider that allows configuring some of its internal values:

angular.module('app', [ 'upp.helptip' ])
.config(function(helptipConfigProvider) {
	// Sets the class to be used
	helptipConfigProvider.className('helptip')
	// Determines if we should try to use $translate if available
	helptipConfigProvider.useTranslate(true)
	// Default timeout when using helptip-timeout config
	helptipConfigProvider.timeout(1000)
})