1

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.

Improve this question
4
  • can you try it as <div id="showAnnouncementdiv" onmouseover="Javascript:getListItems();">Click Here to Display Announcements</div> ? Commented Apr 27, 2017 at 5:05
  • Thanks, but that code is correct, that code just load all the item on button click. Problem starts when all items loads and when I hover to item it does not shows anything, but when I click item it shows expected callout.. Commented Apr 27, 2017 at 5:06
  • That's because you have href, instead of that you should be using onmouseover event . Check this link - w3schools.com/jquery/… Commented Apr 27, 2017 at 5:09
  • Updated the code to remove the confusion... Commented Apr 27, 2017 at 5:35

3 Answers 3

Reset to default
3

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!

Improve this answer
7
  • Great.. It worked but still little problem. First time I have to click on the link, once callout opened with click, then next time it is opening on hover. I want to open it by hover from the first time onward. Thanks for the great link.. Commented Apr 27, 2017 at 8:05
  • I checked this thing on multiple browser, even with the static data. Same happened all the time. Commented Apr 27, 2017 at 9:26
  • 1
    Yes, i have checked the same with static data but it seems to be its default behavior. Commented Apr 27, 2017 at 9:37
  • ok. So I am marking as answer because it solved the purpose. Thanks again saving my time. :-) Commented Apr 27, 2017 at 10:01
  • when we search anything in SharePoint, the search result opens callouts on hover of item. So, hover callout also works in SharePoint. default is not click behavior Commented May 1, 2017 at 10:39
1

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

Improve this answer
1
  • slick way of persisting. Elsewhere MS code samples to create this behavior do not work, but this works great! +1 Commented Jan 25, 2018 at 23:03
1

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};
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.