How to open SharePoint custom callouts on mouse hover instead of mouse click?

Question

I have created a custom SharePoint callout with the help of following code.

<script type="text/javascript" src="/_layouts/15/callout.js"></script>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(getListItems,"callout.js");

        function getListItems() {
var Url = "SiteURL/_vti_bin/ListData.svc/AnnouncementList";
var request = new Sys.Net.WebRequest();
request.set_httpVerb("GET");
request.set_url(Url);
request.get_headers()["Accept"] = "application/json";
request.add_completed(onCompletedCallback);
request.invoke();
}

function onCompletedCallback(response, eventArgs) {
var announcements = eval("(" + response.get_responseData() + ")");
var newAnnouncement = document.createElement("div");
for (var i = 0; i < announcements.d.results.length; i++) {
            _announTitle = announcements.d.results[i].Title;
        _announID = announcements.d.results[i].Id;
_announBody = announcements.d.results[i].Body;
announcementsList.appendChild(newAnnouncement);
var calloutLink = document.createElement("div");
            calloutLink.id = _announID;
            calloutLink.onmouseover = function () {
            curListUrl = this.id; 
        }
calloutLink.innerHTML = "<div class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px;\"><b>" + _announTitle + "</b><br /><br /></div>"; 
announcementsList.appendChild(calloutLink);
var listCallout = CalloutManager.createNew({
    launchPoint: calloutLink,
    beakOrientation: "leftRight",
    ID: _announID,
    title: _announTitle,
    content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">"
    + "<hr/></div>"
    + "<div class=\"callout-section\" style=\"margin-top:13px;\">" + _announBody + "</div>",
}); 

}
}
</script >
    <div id="announcementsList"></div>

You can get this code from here

I am following Display Item Details in a CallOut on Hover Over of Item Title in SharePoint 2013

Here everything works fine, but the callout opens when I click the item, I want it to open when I hover the item.

Any suggestions?

Edit

Updated the code to remove the confusion.

Here I have already used

calloutLink.onmouseover = function () {
    curListUrl = this.id; 
}

Still it open when I click item.

Answer 1

Following line is missing in your code :

       listCallout.set({openOptions:{event: "hover"}});

Try with the following code :

      var listCallout = CalloutManager.createNew({ 
            launchPoint: calloutLink,
            beakOrientation: "leftRight", 
            ID: _announID, 
            title: _announTitle, 
            content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">" 
                    + "<hr/></div>" 
                    + "<div class=\"callout-section\" style=\"margin-top:13px;\">" + _announBody + "</div>", 
        }); 
   listCallout.set({openOptions:{event: "hover"}});
   }

It is working for me. Let me know if you face any issues with this.

For more details refer this link:https://msdn.microsoft.com/en-us/library/office/dn135236.aspx

Thanks!

Answer 2

Got the solution.

I just added this.click() in the following code block

calloutLink.onmouseover = function () { curListUrl = this.id; }

So updated code looks like.

calloutLink.onmouseover = function () { curListUrl = this.id; this.click(); // This line of code was missing }

So final code for custom callout is given below:

<script type="text/javascript" src="/_layouts/15/callout.js"></script>
<script type="text/javascript">
    ExecuteOrDelayUntilScriptLoaded(getListItems, "callout.js");
    function getListItems() {
        var Url = "SiteURL/_vti_bin/ListData.svc/AnnouncementList";
        var request = new Sys.Net.WebRequest();
        request.set_httpVerb("GET");
        request.set_url(Url);
        request.get_headers()["Accept"] = "application/json";
        request.add_completed(onCompletedCallback);
        request.invoke();
    }

    function onCompletedCallback(response, eventArgs) {
        var announcements = eval("(" + response.get_responseData() + ")");
        var newAnnouncement = document.createElement("div");
        for (var i = 0; i < announcements.d.results.length; i++) {
            _announTitle = announcements.d.results[i].Title;
            _announID = announcements.d.results[i].Id;
            _announBody = announcements.d.results[i].Body;
            announcementsList.appendChild(newAnnouncement);
            var calloutLink = document.createElement("div");
            calloutLink.id = _announID;
            calloutLink.onmouseover = function () {
                curListUrl = this.id;
                this.click(); // Only line that was missing in my code
            }
            calloutLink.innerHTML = "<div class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px;\"><b>" + _announTitle + "</b><br /><br /></div>";
            announcementsList.appendChild(calloutLink);
            var listCallout = CalloutManager.createNew({
                launchPoint: calloutLink,
                beakOrientation: "leftRight",
                ID: _announID,
                title: _announTitle,
                content: "<div class=\"ms-soften\" style=\"margin-top:13px;\">"
                + "<hr/></div>"
                + "<div class=\"callout-section\" style=\"margin-top:13px;\">" + _announBody + "</div>",
            });
        }
    }
</script>
<div id="announcementsList"></div>

Got solution from here

Answer 3

I know its late to post but for someone who is looking for a answer.

The above marked answer correct to extend but will have issue it might work on second instance like once clicked then hover.

to have it hover from page load do the following inside the createnew method rather than using the set function

openOptions : {event: "hover", showCloseButton: true};

if not using teh create new function then put it above where you are defining the options

calloutOptions.openOptions = {event: "hover", showCloseButton: true};