openmct/platform/commonUI/inspect/res/infobubble.html

<div ng-init="
bubbles = [
	{layout: 'arw-top arw-left'},
	{layout: 'arw-top arw-right'},
	{layout: 'arw-btm arw-left'},
	{layout: 'arw-btm arw-right'}
];

title='Egress Scenario 1';

properties=[{label:'Type', value:'Timeline', align:'left'},
{label:'Start', value:'2015-04-27 00:00:00 UTC', align:'left'},
{label:'End', value:'2015-04-27 09:15:37 UTC', align:'left'},
{label:'Duration', value:'09:15:37', align:'left'},
{label:'Created', value:'2015-04-26 06:54:00 UTC', align:'left'},
{label:'Modified', value:'2015-04-26 18:38:00 UTC', align:'left'},
{label:'Status', value:'Up to date', align:'left'},
{label:'URL', value:'http://www.logitech.com/en-us/product/bluetooth-mouse-m557?crid=7', align:'left'},
{label:'Description', value:'Enjoy exceptional battery life for a Bluetooth mouse, and work for up to a full year between battery changes, An On/Off switch helps conserve power, smart sleep mode extends battery life, and an indicator light helps to ensure that you’ll never be caught off guard.', align:'wrap'},
{label:'ID', value:'WRP-T-89', align:'left'}];
"></div>

<div
	ng-repeat="bubble in bubbles"
	class="t-infobubble s-infobubble l-infobubble-wrapper {{bubble.layout}}"
	ng-style="{left: $index * 250 + 'px'}"
	>
	<div class="l-infobubble">
		<div
			ng-show="title.length > 0"
			class="title"
			>{{title}}
		</div>
		<table>
			<tr ng-repeat="property in properties">
				<td class="label">{{property.label}}</td>
				<td title="{{property.value}}" class="value align-{{property.align}}">{{property.value}}</td>
			</tr>
		</table>
	</div>
</div>