index.html

<!doctype html>
<html ng-app="720kb">
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="dist/angular-tooltips.css">
    <style media="screen">
      body {

        margin: 100px;
      }

      .scroll-area {

        max-height: 90px;
        overflow: hidden;
        overflow-y: scroll;
        background: grey;
      }

      .scroll-area-horizontal {
        padding: 10px;
        max-width: 90px;
        overflow: hidden;
        overflow-x: scroll;
        background: grey;
        display: flex;
      }

      #demo-container > div {

        margin: 10% 0;
      }

      .a-class {

        font-size: 2em;
      }

      .another-class {

        color: violet;
      }

      .fa-rotate-45 {
          transform: rotate(45deg);
      }
    </style>
    <title>Angularjs Tooltips</title>
  </head>
  <body id="demo-container" ng-controller="DemoCtrl as demoCtrl">
    <div>
      <i class="fa fa-bolt"
      tooltips
      tooltip-append-to-body="true"
      tooltip-close-button="true"
      tooltip-side="right"
      tooltip-hide-trigger="click"
      tooltip-template="I'm a tooltip that is kwjnefk jnkwjenfkjnk kjwnekjn kjwnekfjn kjwenfkjnkwjnekfjnwkejnf kjwnef bounded on body!"></i>
    </div>

    <div>
      <i class="fa fa-code"
      tooltips
      tooltip-hidden="{{ demoCtrl.isHidden }}"
      tooltip-template="I'm a tooltip that was hidden!"></i>
    </div>

    <div>
      <i class="fa fa-recycle"
      tooltips
      tooltip-template="<h3>Stuff</h3> me <br> me <br>"></i>
    </div>

    <div>
      <i class="fa fa-file"
      tooltips
      tooltip-template="I'm a tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-list"
      tooltips
      tooltip-side="left"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-hourglass-end"
      tooltips
      tooltip-side="bottom"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-map"
      tooltips
      tooltip-side="right"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-arrow-left fa-rotate-45"
      tooltips
      tooltip-side="top left"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-arrow-up fa-rotate-45"
      tooltips
      tooltip-side="top right"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-arrow-down fa-rotate-45"
      tooltips
      tooltip-side="bottom left"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <i class="fa fa-arrow-right fa-rotate-45"
      tooltips
      tooltip-side="bottom right"
      tooltip-template="I'm another tooltip!"></i>
    </div>

    <div>
      <span tooltips
        tooltip-template="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.">
        I'm a tooltip content.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="left"
        tooltip-template="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.">
        I'm a tooltip content.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="bottom"
        tooltip-template="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.">
        I'm a tooltip content.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="right"
        tooltip-template="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.">
        I'm a tooltip content.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="left"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="bottom"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="right"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="left"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="bottom"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="right"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="top left"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="top right"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="bottom left"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-side="bottom right"
        tooltip-smart="true"
        tooltip-template="I'm a tooltip!">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt dolor eu nunc interdum vulputate. Integer non lorem nec libero consequat faucibus eu vitae sem. Etiam sit amet nulla aliquam erat pellentesque dictum non quis dui. Phasellus in lorem sed magna condimentum accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec rutrum tristique scelerisque. Nam lorem neque, feugiat quis odio sed, dignissim commodo massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sapien sem, lobortis non erat eu, convallis finibus ante.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="{{ demoCtrl.tooltipText }}">
        I'm a tooltip content.
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="{{ demoCtrl.tooltipText }}">
        {{ demoCtrl.tooltipContentText }}
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-class="a-class"
        tooltip-template="{{ demoCtrl.tooltipText }}">
        {{ demoCtrl.tooltipContentText }}
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-class="{{ demoCtrl.class }}"
        tooltip-template="{{ demoCtrl.tooltipText }}">
        {{ demoCtrl.tooltipContentText }}
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template-url="demo/views/index-with-embedded-controller.html">
        {{ demoCtrl.tooltipContentText }}
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template-url="demo/views/index-without-embedded-controller.html"
        tooltip-controller="Ctrl as ctrl">
        {{ demoCtrl.tooltipContentText }}
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-close-button="true"
        tooltip-template="a tooltip text"
        tooltip-hide-trigger="resize">
        Tooltip
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-close-button="{{ demoCtrl.closeFromModel }}"
        tooltip-template="a tooltip text"
        tooltip-hide-trigger="resize">
        Tooltip
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="a tooltip text"
        tooltip-size="small">
        Tooltip
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="a tooltip text"
        tooltip-size="large">
        Tooltip
      </span>
    </div>


    <div>
      <span tooltips
        tooltip-template="a tooltip text"
        tooltip-size="{{ demoCtrl.sizeFromModel }}">
        Tooltip
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="a tooltip text"
        tooltip-speed="fast">
        Tooltip
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template="a tooltip text"
        tooltip-speed="{{ demoCtrl.speedFromModel }}">
        Tooltip
      </span>
    </div>

    <div class="scroll-area">
      <p>
        <button tooltips
          tooltip-append-to-body="true"
          tooltip-template="A tooltip with text">Tooltip Top</button>
      </p>
      <p>
        <button tooltips
          tooltip-side="left"
          tooltip-append-to-body="true"
          tooltip-template="A tooltip with text">Tooltip Left</button>
      </p>
      <p>
        <button tooltips
          tooltip-side="right"
          tooltip-append-to-body="true"
          tooltip-template="A tooltip with text">Tooltip Right</button>
      </p>
      <p>
        <button tooltips
          tooltip-side="bottom"
          tooltip-append-to-body="true"
          tooltip-template="A tooltip with text">Tooltip Bottom</button>
      </p>
    </div>

    <div class="scroll-area-horizontal">
      <button tooltips
        tooltip-append-to-body="true"
        tooltip-template="A tooltip with text">Tooltip Top</button>
      <button tooltips
        tooltip-side="left"
        tooltip-append-to-body="true"
        tooltip-template="A tooltip with text">Tooltip Left</button>
      <button tooltips
        tooltip-side="right"
        tooltip-append-to-body="true"
        tooltip-template="A tooltip with text">Tooltip Right</button>
      <button tooltips
        tooltip-side="bottom"
        tooltip-append-to-body="true"
        tooltip-template="A tooltip with text">Tooltip Bottom</button>
    </div>

    <div>
      <span tooltips
        tooltip-template-url="demo/views/template-url-cache.html"
        tooltip-template-url-cache="true">
        Tooltip using templateUrlCache
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-template-url="demo/views/template-url-cache.html"
        tooltip-template-url-cache="true">
        Tooltip using templateUrlCache
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-show-trigger="click"
        tooltip-hide-trigger="click"
        tooltip-template="Click again to close">
        Tooltip with same trigger (click) for show and hide
      </span>
    </div>

    <div>
      <span tooltips
        tooltip-show-trigger="mouseenter"
        tooltip-hide-trigger="mouseenter"
        tooltip-template="Mouseover again to close">
        Tooltip with same trigger (mouseover) for show and hide
      </span>
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js"></script>
    <script type="text/javascript" src="lib/angular-tooltips.js"></script>
    <script type="text/javascript" src="demo/js/index.js"></script>
  </body>
</html>