SharePoint Online Callout, show from left side only (beakOrientation: left)

Question

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) {
        launchpoint.classList.add("first-callout-parent");
    }

    // 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);
    callout.open();
}

Answer 1

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
    }

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.