A nice tooltip for Angular.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

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