🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Fo-tooltip is a nice tooltip directive for angularjs app.

Plugins

Documentation

fo-tooltip

A nice tooltip

Demo

Install

$ bower install fo-tooltip --save

Require

Beside

$ bower install beside --save

Usage

<link rel="stylesheet" href="bower_components/fo-tooltip/dist/css/fo-tooltip.css" />  <script src="bower_components/beside/dist/js/beside.js"></script> <script src="bower_components/fo-tooltip/dist/js/fo-tooltip.js"></script> 
angular.module('app', ['foTooltip']);

Template-url

<div   class="tooltip-demo"   tooltip-position="top left"   tooltip-class="hello"   tooltip-template-url="tooltip-top-left.html"   fo-tooltip > Top Left </div>  <script id="tooltip-top-left.html" type="text/ng-template">   Top Left </script>

Template-str

<div   class="tooltip-demo"   tooltip-position="top left"   tooltip-class="hello"   tooltip-template-str="tooltip show me"   fo-tooltip > Top Left </div> 

Options

  • tooltip-position set tooltip position
    • top left
    • top center
    • top center
    • top left
    • top right
    • bottom center
    • bottom left
    • bottom right
    • left center
    • left top
    • left bottom
    • right center
    • right top
    • right bottom
  • tooltip-template-url use template content
  • tooltip-template-str use string content
  • tooltip-offset offset base on tooltip
  • tooltip-delay delay after leave target or tooltip
  • click-hide click target to hide tooltip
  • tooltip-class class for tooltip element
  • tooltip-id id for tooltip element
  • tooltip-onclose a function to be called when the tooltip is closed

You May Also Like