Change date="" value of tooltips if they are displayed at resolution lower than 767px?

With a very simple function you can solve this:

function adjustTooltipOrientation(el) {
    var target = document.getElementById(el);
    var orientation = window.innerWidth<767 ? 'bottom' : 'right';
    target.dataset.mytooltipDirection=orientation;
}

To use, just call it this way:

adjustTooltipOrientation('id-da-div-desejada');

See working at CODEPEN

Note that to simplify the test , we use CSS content to show the value of the attribute. Only modern browsers recognize this attribute, so I recommend testing on a recent Opera or Firefox (I believe Chrome works too). This test restriction does not interfere with the actual application of the code.

Using with class :

As already said in the comments, if you want to use with class (what is not in the question), you can change the function to act on the element, instead of id :

function adjustTooltipOrientation(target) {
    var orientation = window.innerWidth<767 ? 'bottom' : 'right';
    target.dataset.mytooltipDirection=orientation;
}

Then just use one

var l = document.getElementsByClassName('classe');
for (var i=0; i<l.length; i++) adjustTooltipOrientation(l[i]);

See working at CODEPEN

Note that use is an example, you have to adjust to the reality of your page .

You can call this function on page load, and for a better experience, in the resize event.

Use the "date ()" method to change the value of the attribute. Put inside the "ready ()" call in your script. If every input with this tooltip has as one of the style classes "js-mytooltip", this command will be global, it will affect all tooltips.

Using test and inline assignment:

$(function() { //ready()
    $(".js-mytooltip").data("mytooltip-direction", ($(window).width() < 767) ? 'bottom' : 'right');
});

Same extended code:

$(function() { //ready()
    if($(window).width() < 767) {
        $(".js-mytooltip").data("mytooltip-direction", "bottom");
    } else {
        $(".js-mytooltip").data("mytooltip-direction", "right");
    }
});

You can use an auto-executable function that checks all elements with the js=tooltip class and runs the main function in the resize event of the window.

Regardless of whether the user opens on a desktop or a mobile, the script will run and re-run in the resize event.

// auto execute
;(function(){
    var init = function(){
        var get = document.getElementsByClassName('js-mytooltip');
        if(!!get){
           var i = get.length;
           for(;i--;){
               if( window.innerWidth < 767 && get[i].getAttribute('data-mytooltip-direction') ){
                   get[i].setAttribute('data-mytooltip-direction','bottom');
               }else{
                   get[i].setAttribute('data-mytooltip-direction','right')
               }
           }
        }
    };
    // initialize
    init();
    // listen event
    window.addEventListener('resize', init);
})();

<span class="js-mytooltip" data-mytooltip-direction="right"></span>

<span class="js-mytooltip" data-mytooltip-direction="right"></span>

<span class="js-mytooltip" data-mytooltip-direction="botom"></span>

<!-- havendo classe mas não havendo data-, então sera criado -->
<span class="js-mytooltip" data-another="sort value"></span>

<span class="notooltip" data-mytooltip-direction="undefined"></span>