How to enable tooltips in HTML drawings

var parameters = new Ab.view.ConfigObject(); parameters['showTooltip'] = true;

By default, Rooms is the default asset for tooltips. The control grasps tooltips from corresponding asset labels in SVG, that is, currently displayed asset labels on the screen.

How to change tooltips look

CSS class svgTooltip is defined in htmldrawing.css .

div.svgTooltip { background-color: black; border: 1px solid #000000; border-radius: 4px 4px 4px 4px; color: white; font-size: 8pt; opacity:0.75; filter:alpha(opacity=35); /* IE8 and earlier */ padding: 5px; position: absolute; pointer-events: none; z-index: 9999; text-align: center; }

Create a CSS file in applications, define your own CSS svgTooltip and link it in application views.

How to enable tooltips for multiple asset types

var config = new Ab.view.ConfigObject(); config['showTooltip'] = true; //show tooltips over Rooms, Equipment and Jacks if they are available in a floor plan config['addOnsConfig'] = { 'AssetTooltip': {handlers: [ {assetType: 'rm'}, {assetType: 'eq'}, {assetType: 'jk'}] };

How to enable tooltips only for highlighted assets

var config = new Ab.view.ConfigObject(); config['showTooltip'] = true; //show tooltips only over highlighted Rooms config['addOnsConfig'] = { 'AssetTooltip': {handlers: [ {assetType: 'rm', highlightOnly: true}] };

How to pass tooltip dataSource and visible fields

var config = new Ab.view.ConfigObject(); config['showTooltip'] = true; var tootipsDS = View.dataSources.get('labelDepartmentDs'; //pass parameters or set restriction to dataSource object /* tootipsDS.addParameter(name, value); tootipsDS.setRestriction(restriction); */ //pass array of fields which record values will show up with tooltip, otherwise, the control will display all dataSource's visible fields config['addOnsConfig'] = { 'AssetTooltip': {handlers: [ {assetType: 'rm', datasource: tootipsDS, fields: ['rm.rm_id', 'rm.dv_id', 'rm.dp_id']}]};

Note: If applications allow users to change Employee locations by dragging/dropping them, the tooltips from Database may not work as expected since the dragging/dropping is made in client-side.

How to customize default tooltip handler in dataSource selector

var config = new Ab.view.ConfigObject(); config['showTooltip'] = true; config['addOnsConfig'] = { DatasourceSelector: {divId: "drawingDiv", panelId: "drawingPanel", addTooltips: function(labelDSId, selectorControl){ var addOneTooltip = selectorControl.drawingController.addOnsController.getAddOn('AssetTooltip'); if(addOneTooltip){ //clear up existing AssetTooltip object from memory selectorControl.drawingController.addOnsController.removeAddOn('AssetTooltip'); } var labelDs = View.dataSources.get(labelDSId); var assetType = labelDs.mainTableName; selectorControl.drawingController.addOnsController.registerAddOn('AssetTooltip', {handlers: [{assetType: assetType}]}); }} };

In cases that applications implement onSelectedLabelDatasourceChanged to skip core event handling, the applications have to add the similar following codes into onSelectedLabelDatasourceChanged:

var isLabelingAndShowTooltip = combo.id.indexOf('label') >=0 && DrawingCommon.toBoolean(selectorControl.config['showTooltip']); if(isLabelingAndShowTooltip ){ //invoke core tooltip handling selectorControl.addTooltips(combo.id, selectorControl) }

How to get an application's own tooltip contents

If an application wants to get its own tooltip contents, override AssetTooltip's getContent() .

/** *Example over how to override AssetTooltip's getContent(). */ var visibleFields = []; tooltipDatasource.fieldDefs.each(function(fieldDef) { if(fieldDef.hidden !== 'true'){ visibleFields .push(fieldDef.id); } }); var restriction = new Ab.view.Restriction(); //bl_id and fl_id passed by user's selection of a floor restriction.addClause('rm.bl_id', 'HQ', true); restriction.addClause('rm.fl_id', '19', true); //get all tooltip records for floor plan HQ-19 var allRecords = tooltipDatasource.getRecords(restriction); //grasp tooltip for one specified asset by its primary key values drawingController.getAddOn("AssetTooltip").getContent = function(assetType, assetId){ var values = []; //get rm_id from assetId var rm_id = assetId.split(';')[2]; //loop allRecords to get the records restricted by the rm_id value for(var i=0, len=allRecords.length, record, value; i<len; i++){ record = allRecords[i]; value = record.getValue('rm.rm_id'); if(value === rm_id){ //get visible field values from record for(var j=0, field; j< visibleFields.length; j++){ visibleField = visibleFields[j]; value = record.getValue(visibleField); if(value && values.indexOf(value) < 0){ //localized value for display values.push(tooltipDatasource.formatValue(visibleField, value, true)); } } } } var content = ''; if(values.length > 0){ content = values.join('<br>'); } if(content){ return content; } else { return assetId; }

Note: Since getContent() will be invoked each time when the mouse is over any room, query database could result in a performance concern. The example posted here is to query database once and use cached records for all mouse-over events.