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

  • 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-\">"
        + "<hr/></div>"
        + "<div class=\"callout-section\" style=\"margin-\">" + _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?

    Here I have already used
    calloutLink.onmouseover = function () {
        curListUrl = this.id; 
    }

    Still it open when I click item.


    Thursday, April 27, 2017 6:40 AM

Answers

  • Hi,

    Here you go.

     

    <script type="text/javascript" src="/_layouts/15/mquery.js"></script>
        <script type="text/javascript" src="/_layouts/15/callout.js"></script>
        <script type="text/javascript">
    
            //This functions makes the request to the RESTful ListData service
            function getListItems() {
                var Url = "http://sp:12001/_vti_bin/ListData.svc/Announcements";
                //Create a WebRequest object
                var request = new Sys.Net.WebRequest();
                //Specify the verb
                request.set_httpVerb("GET");
                //Use the URL we already formulated
                request.set_url(Url);
                //Set the Accept header to ensure we get a JSON response
                request.get_headers()["Accept"] = "application/json";
                //Add a callback function that will execute when the request is completed
                request.add_completed(onCompletedCallback);
                //Run the web requests
                request.invoke();
    
            }
    
            function onCompletedCallback(response, eventArgs) {
                //Parse the JSON reponse into a set of objects by using the JavaScript eval() function
    
                var announcements = eval("(" + response.get_responseData() + ")");
    
                var newAnnouncement = document.createElement("div");
    
                for (var i = 0; i < announcements.d.results.length; i++) {
    
                    //Display some properties
                    _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();
                    }
    
                    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",
                        openOptions: { event: "hover", showCloseButton: true } ,
                        ID: _announID,
                        title: _announTitle,
                        content: "<div class=\"ms-soften\" style=\"margin-\">"
                                + "<hr/></div>"
                                + "<div class=\"callout-section\" style=\"margin-\">" + _announBody + "</div>",
                    });
                    
                }
    
            }
        </script>
    
        <div id="announcementsList"></div>
        <a href="Javascript:getListItems()">Click Here to Display Announcements</a>

    You could check below link for more detail.

    https://msdn.microsoft.com/en-us/library/office/dn135236.aspx

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by TrimantraLLP Tuesday, May 2, 2017 4:04 AM
    Friday, April 28, 2017 6:12 AM