Change data value=" of tooltips if displayed in resolution less than 767px?

Asked

Viewed 249 times

6

I’m implementing a few tooltips on a contact form I am developing. It turns out that when it is loaded in lower resolution (below 767px), it is cut tooltips. This is due to the fact of tooltips have had their direction set by data-mytooltip-direction="right". Notice that it is set "right" which means (right) in Portuguese.

How to make that below (767px) the data-mytooltip-direction="right" change of "right" for "bottom" ?

Example:

<input class="form-control validation js-mytooltip" data-mytooltip-custom-class="align-center" data-mytooltip-direction="right" data-mytooltip-theme="light" data-mytooltip-content="O e-mail é importante para o acompanhamento" id="texto" name="email" type="text" data-email="Email inválido" data-required="Campo obrigatório">

How to make it work?

javascript jquery
  • 1

    I reversed the issue, because it changed the meaning of it too much after answering. The ideal is to ask the question with all the details from the beginning, and at most complementary. Change nature, no. And you do it with a certain frequency.

  • It’s the only solution I see @Bacco via PHP, for I saw Javascript won’t be possible :( I’ll do what then? Another question?

  • 2

    What you’re gonna do, I don’t know, I’m just explaining what you can’t do. You can ask freely within the rules of the site, but it is no use waiting for them to give you the service ready in the smallest details and keep stirring the question until you get it answered. I already answered once, complemented with a Codepen of the second case, which not even in the question was, and everything works perfectly. And now you want to change the language? It’s unreasonable to use the site this way. The site is here to be used, but already elaborate the question with everything you need from the beginning.

  • I quoted PHP as a better option, ie via Javascript or PHP. Javascript I think is kind of unlikely. When you say "The ideal is to ask the question with all the details from the beginning", it happens that we will only know by testing, then the person may want to change something, because now we know that there are things that cannot be done. That’s why sometimes we change.

3 answers

13


With a very simple function 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 this way:

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

See working on CODEPEN

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


Using with class:

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

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

Then just use a

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

See working on CODEPEN

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

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

  • Hello Bacco, just had a little problem, your example is with a DIV, and in case it needs to be done in several INPUT’s :/ I think that class=" " would be ideal :/

  • 3

    I answered the question based on what you put in it, an input, but it makes no difference, as it is a function, you can call for all the elements you want, quietly. The important thing is to understand the logic, and adjust to your case. If you prefer to loop by class. it also works fine, just adjust getElementById.

  • Bacco, sorry my lack of knowledge, rsrs, but how do I put to work in several INPUT's ? His example was perfect :3

  • 3

    Alexandre Lopes, in place of document.getElementById(el);, just put document.getElementsByClassName(el);. You did not make it clear in the question about this "condition". He gave a generic answer. Adapt it according to your case. You still have to do a loop loop for () { iterating the elements.

  • Bacco, you can create a Codepen in the example using class? I tried here and it’s making a mistake :/

  • @Bacchus .......?

  • 1

    Ready, reviewed, tested and put in codepen. I will take care of other things here, because I’ve been long in this post.

  • @Bacco always goes on right, is not changing to bottom, I think there’s a little problem with your Codepen

  • 1

    This automatic change is just copying the other. This codepen is basically for you to see how to use the adjusted function.

  • Ahh, now I get it. It doesn’t change according to what the page is resized, but according to the size of the screen that was loaded.

  • 1

    Yes, but to change automatic just do what was done in the other codepen, put the loop inside an onResize. Well, I need to go, I’m late here. I’m not even supposed to be on the website.

  • @Bacco didn’t work here. I updated the question, take a look there. PHP must be ideal. :/

Show 7 more comments

4

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

Using test and inline assignment:

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

The same extended code:

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

  • Carlos, take a look at the question, I edited it. It didn’t work, precisely because I quoted it. I think PHP would be the best, or only way to make this work.

  • Javascript serves precisely to modify an already loaded page. Through Javascript (even easier if you’re using jQuery) you can access any element and element attribute in HTML. A question, you are testing by dragging the screen or already opening in a small window?

  • If you’re testing in Google Chrome, press F12 and see the changes happening in the DOM of your HTML in real time. It is different from checking the source code, because in F12 it shows the DOM structure that the browser is running at the moment and in real time. For example, if you give a Document.write(<span>hello world</span>), you will see this element nested within the HTML structure, while in the source you will see the script command.

2

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

Regardless of the user opening on a desktop or mobile the script will be executed and re-executed in the event resize.

// 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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.