Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular-tipped

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-tipped

AngularJS directive for Tipped tooltip library

  • 1.0.0-4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

angular-tipped npm version Bower version

An AngularJS directive for the Tipped tooltip library.

Usage

Require the fv.tipped module:

angular.module('myApp', ['fv.tipped']);

Simple Tooltips

Use the directive:

<div tipped title="foo {{bar}}">{{bar}}</div>

This will create a Tipped tooltip that will show on hover after 1s and hide when you move your mouse out after 500ms. The value is interpolated. These defaults can be changed by injecting the tippedOptions constant:

angular.module('myApp', ['fv.tipped']).config(function(tippedOptions) {
    tippedOptions.showDelay = 500; // reduce the delay to show the tooltip to 500ms.
});

Pass any options to Tipped (see the docs) via an object in the tipped directive itself:

<div tipped="{showDelay: 500}" title="I'm a tooltip">hover me</div>

Unique Features

Template URLs

The above is of course for a simple tooltip, but if you wish to do something more involved, you can pass a template URL to the directive:

<div tipped template-url="'my-template.html'">hooey</div>

The value of templateUrl is evaluated against the current scope, so you may pass it a string in single-quotes or an expression. There is no $watch on the expression as of this writing. The directive will look in the $templateCache here for something called my-template.html, and will/should avoid making the GET request to go grab it, if found. The template is compiled and linked against the current scope, so you can do basically anything you want within one of these tooltips.

Show/Hide via Scope

angular-tipped supports an option called show, which is not a Tipped option, and is different than showOn . Pass a model to show in the options and the tooltip will hide/show as it changes. For example:

<div tipped="{show: foo}" title="jumpin">punkins</div>
$scope.foo = false;
//... time passes ...
$scope.foo = true; // tooltip shows
The Tipped Service

The Tipped service allows you to create a Tipped configuration object containing all user defaults (and "default" defaults) to be used in the view.

TODO

The tippedModal Directive

The tippedModal directive creates a dialog-box-like tooltip (functioning much like the ui-bootstrap $modal service, which is closable via Scope functions $dismiss() or $close(). Opening a tooltip will return a resolved or rejected promise upon closure or dismissal, respectively.

TODO

Installation

$ bower install angular-tipped

Alternatively, if using in a server-side context (such as with Browserify):

$ npm install angular-tipped

Dependencies

  • AngularJS v1.2.0 < v2.0.0
  • Tipped v3.1.8 < v4.0.0
  • jQuery v1.4.4 < v2.0 (Tipped requirement)

Note: Tipped is not open-source software, and as such is not included in angular-tipped's depepdencies; it must be installed manually.

This package may or may not work with newer versions of Tipped or jQuery. If you have success or failure with newer versions than those listed above, please let us know.

Authors

License

Copyright 2013-2015 FocusVision Worldwide. Licensed MIT.

Tipped is Copyright 2010-2015 Nick Stakenburg.

Keywords

FAQs

Package last updated on 09 Jul 2015

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc