Protractor finding a popup element in a web UI - protractor

Question

I'm trying to hover the mouse over a given element so that the help balloon appears. I need help finding the element to take action on.
I'm new with protractor. I have the docs in front of me and I've also reviewed many SO postings regarding protractor and element finding. By and large I'm doing ok, but I have one that's a bit complicated and eluding my newb ability.
I've tried many variations of by.className(), by.css() and either it finds multiple elements, or None. The acp-help-circle appears 6 times in the given UI. I'm only sharing a snippet of the code (for brevity sake of course).
<ng-include src="'OtherSettingsTemplate'" class="ng-scope"><div class="nok-content-panel panel panel-default ng-scope ng-isolate-scope" is-collapsed="true">
<div class="panel-heading ng-scope util-clickable" ng-class="{'util-clickable':contentPanel.collapsable}" ng-click="contentPanel.headerClick($event);">
<i ng-show="contentPanel.collapsable" class="toggle-icon icon-states acp-caret-bottom" ng-class="{'acp-caret-bottom' : !contentPanel.isCollapsed, 'acp-caret-right': contentPanel.isCollapsed}" style=""></i>
<b class="ng-binding ng-scope">Other</b>
<div class="right ng-scope">
<i class="acp-help-circle ng-scope" popover-placement="left" popover-trigger="'hovertooltip'" uib-popover-html="'Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.'" nok-popover="Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration."></i>
</div>
</div>
<div class="panel-collapse ng-scope in collapse" uib-collapse="contentPanel.isCollapsed" style="" aria-expanded="true" aria-hidden="false">
<div class="panel-body">
<div class="content-wrapper">
<form name="editApp.otherSettingsForm" class="otherSettingsForm ng-pristine ng-valid ng-scope" novalidate="">
<fieldset>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Document Control</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.dcEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.docManagerEnabled && !editApp.configuration.otherSettings.dcEnabled" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Inky</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.inkyEnabled" size="medium" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow p-t-10">
<div class="col-title">
<span class="label ng-binding">Doc Manager</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.docManagerEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.dcEnabled && !editApp.configuration.otherSettings.docManagerEnabled " class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</ng-include>
Just a few of the many iterations I've tried...
element(by.className('acp-help-circle')) //finds > 1. The class is not unique.
element(by.cssContainingText('Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.')) //this finds none.
Any help is appreciated

Answer 1

If your looking for the locator, Try any of the below locator to select help balloon
const ele = element(by.css('div.panel-heading>div>i.acp-help-circle'));
const ele = element(by.css('div.right>i.acp-help-circle'));
const ele = element(by.css('div.panel-heading>div>i'));
If you still get more than one element. Then try the below one
const ele = element.all(by.css('div.panel-heading>div>i.acp-help-circle')).get(1); //Change the index as per the index of your element in the element array.
Hope it helps you