tooltip

by Kuitos Lau

HTML

<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="//unpkg.com/ccms-components/ccms-components.js"></script>
<link rel="stylesheet" href="//unpkg.com/ccms-components/ccms-components.css">
<input type="text" ng-model="tip" cc-tooltip="tip" tooltip-trigger="click" tooltip-append-to-body="true">

<button type="button" cc-tooltip="'hello world hello world hello world hello world hello world hello world'"
        tooltip-close-delay="500" tooltip-open-delay="200" style="margin-top: 50px">hover normal tooltip
</button>

<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" style="margin-top: 50px">hover error tooltip
</button>
<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="bottom-right" style="margin-top: 50px">hover error tooltip bottom-right
</button>
<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="right" style="margin-top: 50px">hover error tooltip right
</button>
<button type="button" cc-tooltip="'hello world'" tooltip-type="error-minor" tooltip-placement="left" style="margin-top: 50px">hover error tooltip left
</button>

<button type="button" cc-tooltip="'click me mdzz'" tooltip-trigger="click">click toggle tooltip</button>
<button type="button" cc-tooltip="'click me mdzzclick me mdzzclick me mdzzclick me mdzzclick me mdzzclick me mdzz'" tooltip-trigger="click">click toggle tooltip</button>


<div>
	<a href="#" cc-tooltip="'啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊'" tooltip-append-to-body="true">详情</a>
</div>
<div>
	<a href="#" cc-tooltip="'不要不要不要不要不要不要不要不要不要不要不要不要'" tooltip-append-to-body="true">详情1</a>
</div>

<div>
	<a href="#" cc-tooltip="app.template" tooltip-compilable="true" tooltip-append-to-body="true">详情2</a>
</div>

<button type="button" cc-tooltip="'hello world...

JavaScript

/**
 * @author Kuitos
 * @homepage https://github.com/kuitos/
 * @since 2016-03-29
 */

angular
	.module('app', ['ccms.components'])
	.controller('appCtrl', function() {

		this.entity = ['A', 'B', 'C'];

		this.join = function(entity) {
			return entity.join(',');
		};

		this.opened = true;

		this.template = '<div>' +
			'<div ng-repeat="i in app.entity" ng-bind="i"></div>' +
			'</div>';

	});