I use SharePoint callouts with "beakOrientation":"leftRight". It sometimes show on the right, sometimes on the left. Can I set it only to the left? It works ok but breaks views on small laptops

Here is part of my code. Just for example - I dynamically add class to first callout (my divs and callouts are generated from list)

function addCalloutTip(id, tip, title, url, isFirst) {

    // get the launchpoint element of the callout
    var launchpoint = document.getElementById(id);

    // first callout has different css, so add class to launchpoint dynamically
    if (isFirst) {

    // configure Callout options
    var calloutOptions = new CalloutOptions();
    calloutOptions.ID = id;
    calloutOptions.launchPoint = launchpoint;
    calloutOptions.beakOrientation = "leftRight"; // want to deny 'Right' here..
    calloutOptions.content = tip;

    calloutOptions.openOptions = {
        event: "hover"

    // call the CalloutManager to create the callout and then open
    var callout = CalloutManager.createNewIfNecessary(calloutOptions);
  • I havent find any other chance only topBottom and leftRight. – Zdeněk Vinduška Jan 18 '19 at 14:49
  • Yes, but maybe somebody had same task and customized this control.. I played with CSS but i"m not guru in this. The only think I can is to change some properties like callout width, or, for example .js-callout-content { margin-top: -150px; } – Gennady G Jan 18 '19 at 16:02
  • When you say "breaks views on small laptops" what does 'breaks view' really mean? does the page load? does the callout render but the view renders improperly? could you describe the symptoms of the breakage? – A.k.A. Fritz Jan 18 '19 at 21:32
  • Hi @A.k.A.Fritz! >>symptoms of the breakage? - If this callout appears on right side, screen scrolls to the right. I need to show this callout on left side only. Sorry for my english – Gennady G Jan 19 '19 at 8:09

The position of the callout between left-right or top-bottom is determined based on best available space without being truncated. Based on my experience it should work correctly as long as there is no other conflicting css altering the width and height dynamically.

With that being said, we can however force the callout to a certain position by using the property 'positionAlgorithm' on the callout object.

SP.SOD.executeFunc("callout.js", "Callout", function () {
        var calloutPageElement = document.getElementById("calloutdiv")
        var callout = CalloutManager.createNew({
            ID: "testcallout",
            launchPoint: calloutPageElement,
            title: "callout title",
            beakOrientation: "leftRight",
            positionAlgorithm: customPosition

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


    function customPosition(calloutPositioningProxy){
        calloutPositioningProxy.moveUpAndLeft(); //always position top left

enter image description here

There are various methods available on calloutPositionProxy object that you can use to position the callout based on your logic. Alternatively you can also use 'boundingBox' property to define the outer html for the callout and then position it accordingly.

You can read more about the callout functionality on MS docs.

|improve this answer|||||
  • FANTASTIC, @sssreddy!! I felt there should be solution! :) Thank You much!)) – Gennady G Jan 23 '19 at 13:13

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.