positioning popups on partial views

positioning popups on partial views

I have a partial view that I would like to incorporate my
popup/notifications into. I would like to position these notifications
around the two "buttons". However, I'm not actually sure how to position
these popups around the buttons. In the documentation examples, it states
to use the id of the popup div in the href of where the popup should
occur.
example:
<a href="#popupPadded" data-rel="popup" data-role="button">Popup with
padding</a>
<div data-role="popup" id="popupPadded" class="ui-content">
<p>This is a popup with the <code>ui-content</code> class added to the
popup container.</p>
</div>
But my partial view is being used somewhere else with href="#". How can I
position my popups in the partial view and also reuse them on other pages?
Here is the HTML for my partial view:
<a href="#" data-icon="GhCsStatus-Red" data-position-to="origin"
data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_CS"
style="pointer-events: none;">CS</a>
<a href="#" data-icon="GhCsStatus-Red" data-position-to="origin"
data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_GH"
style="pointer-events: none;">GH</a>
<div id="GH_popup" data-role="popup">
<p> Get History is OFF! </p>
</div>
<div id="CS_popup" data-role="popup">
<p> Communication Service is OFF! </p>
</div>
<div id="GHCS_popup" data-role="popup">
<p> Get History and Communication Service are OFF! </p>
</div>