angular-material-npfixed/src/components/tooltip/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" ng-cloak>

  <md-toolbar class="md-accent">
    <div class="md-toolbar-tools">

      <h2>Awesome Material App</h2>
      <span flex></span>
      <md-button class="md-icon-button test-tooltip" aria-label="Refresh">
        <md-tooltip md-direction="left">Refresh</md-tooltip>
        <md-icon
          md-svg-src="img/icons/ic_refresh_24px.svg"
          style="width: 24px; height: 24px">
        </md-icon>
      </md-button>

    </div>
  </md-toolbar>

  <md-content layout-padding style="margin-left: 20px; margin-right: 20px">
    <div>

      <p>
        The tooltip is visible when the button is hovered, focused, or touched.
        Hover over the <strong>Refresh</strong> icon in the above toolbar.
      </p>

      <div style="margin-top: 20px">
        <p>
          The Tooltip's <code>md-z-index</code> attribute can be used to change
          the tooltip's visual level in comparison with the other elements of
          the application.<br />
          <strong>Note:</strong> the z-index default is <strong>100</strong>.
        </p>
      </div>

      <div style="margin-top: 20px">
        <p>
          The Tooltip's <code>md-direction</code> attribute can be used to
          dynamically change the direction of the tooltip.<br />
          <strong>Note:</strong> the direction default value is
          <strong>'bottom'</strong>.
        </p>
        <div layout="row" layout-align="space-between">
          <md-radio-group
            ng-model="demo.tipDirection"
            style="padding-left: 30px">
            <md-radio-button value="top">Top</md-radio-button>
            <md-radio-button value="right">Right</md-radio-button>
            <md-radio-button value="bottom">Bottom</md-radio-button>
            <md-radio-button value="left">Left</md-radio-button>
          </md-radio-group>
          <md-button class="md-fab">
            <md-tooltip
              md-direction="{{demo.tipDirection}}">
              Insert Drive
            </md-tooltip>
            <md-icon
              md-svg-src="img/icons/ic_insert_drive_file_24px.svg">
            </md-icon>
          </md-button>
        </div>
      </div>

      <div style="margin-top: 30px">
        <p>
          The Tooltip's <code>md-visible</code> attribute can be used to
          programmatically show/hide itself. Toggle the checkbox below...
        </p>
        <div layout="row" layout-align="space-between center">
          <div style="padding-left: 30px">
            <md-checkbox ng-model="demo.showTooltip" style="padding-left: 30px">
              Insert Drive
            </md-checkbox>
          </div>
          <md-button class="md-fab" aria-label="Photos">
            <md-tooltip md-visible="demo.showTooltip">Photos</md-tooltip>
            <md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
          </md-button>
        </div>
      </div>

      <div style="margin-top: 20px">
        <p>
          The Tooltip's <code>md-delay</code> attribute can be used to delay
          the show animation.<br />
          <strong>Note:</strong> the delay default value is
          <strong>0 milliseconds</strong>.
        </p>
        <div layout="row" layout-align="space-between center">
          <div style="padding-left: 30px">
            <md-input-container>
              <label>Tooltip Delay</label>
              <input ng-model="demo.delayTooltip" />
            </md-input-container>
          </div>
          <md-button
            class="md-fab"
            aria-label="Menu with Tooltip Delay"
            style="margin-top: -24px">
            <md-tooltip md-delay="demo.delayTooltip">
              Menu with Tooltip Delay {{demo.delayTooltip}} msecs
            </md-tooltip>
            <md-icon md-svg-src="img/icons/ic_more_vert_24px.svg"></md-icon>
          </md-button>
        </div>
      </div>

    </div>
  </md-content>

</div>