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.

  • can you try it as <div id="showAnnouncementdiv" onmouseover="Javascript:getListItems();">Click Here to Display Announcements</div> ? – Gautam Sheth Apr 27 '17 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.. – Trimantra Software Solution Apr 27 '17 at 5:06
  • That's because you have href, instead of that you should be using onmouseover event . Check this link - w3schools.com/jquery/… – Gautam Sheth Apr 27 '17 at 5:09
  • Updated the code to remove the confusion... – Trimantra Software Solution Apr 27 '17 at 5:35
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!

  • 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.. – Trimantra Software Solution Apr 27 '17 at 8:05
  • I checked this thing on multiple browser, even with the static data. Same happened all the time. – Trimantra Software Solution Apr 27 '17 at 9:26
  • 1
    Yes, i have checked the same with static data but it seems to be its default behavior. – Ekta Dobaria Apr 27 '17 at 9:37
  • ok. So I am marking as answer because it solved the purpose. Thanks again saving my time. :-) – Trimantra Software Solution Apr 27 '17 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 – Trimantra Software Solution May 1 '17 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

  • slick way of persisting. Elsewhere MS code samples to create this behavior do not work, but this works great! +1 – SP Combatant Jan 25 '18 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};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.