Callout (js) error in application page

Question

Callout throws the following js error:

Error: Argument has no callout associated with it.

The above error results from a Callout on an application page, via the following code:

<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(CreateCallOutPopup, "callout.js");

            function CreateCallOutPopup() {
                        var targetElement = document.getElementById('NotificationDiv');

                        // configure options
                        var calloutOptions = new CalloutOptions();
                        calloutOptions.ID = 'notificationcallout';
                        calloutOptions.launchPoint = targetElement;
                        calloutOptions.beakOrientation = 'leftRight';
                        calloutOptions.content = "My Content";
                        calloutOptions.title = "My title";
                        calloutOptions.contentWidth = 400;
                        var callout = CalloutManager.createNewIfNecessary(calloutOptions);
                    }
</script>
<div id="NotificationDiv">click here</div>

Callout MSDN guide (for hosted apps)

---

update the issue was caused by the div content:

<div id="NotificationDiv"><asp:Label ID="lbl1" runat="server" Text="text"/> <a class="js-callout-launchPoint" id="ms-pageDescriptionDiv" href="javascript:;"> <span id="ms-pageDescriptionImage">&#160;</span></a></div>

class="js-callout-launchPoint" was triggering the conflict

Answer 1

the issue was caused by the div content:

<div id="NotificationDiv"><asp:Label ID="lbl1" runat="server" Text="text"/> <a class="js-callout-launchPoint" id="ms-pageDescriptionDiv" href="javascript:;"> <span id="ms-pageDescriptionImage">&#160;</span></a></div>

class="js-callout-launchPoint" was triggering the conflict

Answer 2

Try using SP.SOD.executeFunc

SP.SOD.executeFunc("callout.js", "Callout", CreateCallOutPopup);

    function CreateCallOutPopup() {
    var targetElement = document.getElementById('NotificationDiv');

        // configure options
        var calloutOptions = new CalloutOptions();
        calloutOptions.ID = 'notificationcallout';
        calloutOptions.launchPoint = targetElement;
        calloutOptions.beakOrientation = 'leftRight';
        calloutOptions.content = "My Content";
        calloutOptions.title = "My title";
        calloutOptions.contentWidth = 400;
        var callout = CalloutManager.createNewIfNecessary(calloutOptions);
    }

Answer 3

The syntax of ExecuteOrDelayUntilScriptLoaded is

 ExecuteOrDelayUntilScriptLoaded("sp.js", "callout.js", CreateCallOutPopup);