responsive tooltips - Githubissues

Flyer53 commented 9 years ago

@devmondo @genachka I started my first experiments with responsive tooltips and there is a very first example of tooltips shifting left or right when overflowing the window. This first example currently works only as sort of a callback after generating the tooltip:

http://jspanel.de/beta/responsive.html

By default the two buttons generate generate centered tooltips with corners. Now resize the window to a size that makes the tooltips overflow and mouseover again.

Ideas:

tooltips overflowing to the left shift right (but only if there is no additional overflow to the right)
tooltips overflowing to the right shift left (but only if there is no additional overflow to the left)
shifting of tooltips is limited so that they never loose contact to the triggering element
tooltips overflowing both sides don't shift - in this case, I think, the layout should be changed

What do you think?

devmondo commented 9 years ago

@Flyer53 awesome, i just tried it and it works, and the points you mentioned are great, what i only believe in is that on Mobile small screens, tooltip should either shift to top, button, or center.

things will clear out, once you are done and we test it, so all the best :)

Flyer53 commented 9 years ago

@devmondo Thanks buddy :) Well, there are of course some more ideas I want to implement step by step. But I don't want to overanimate things. I wouldn't want tooltips jumping around. The first step, I think, should be a website layout that has no need of too much tooltip corrections.

Small screens on mobile phones:

Just a thought ... it might be a good idea here that the developer implements some kind of device/feature detection in order to use only top or bottom tooltips anyhow on those devices. Vertical scrolling is quite natural on mobiles and there wouldn't be a need to correct tooltip positions more than maybe a litle left/right shift.
If you think of shifting a tooltip to center position on small screens consider this: Don't use a tooltip at all, but a centered hint. That code is already there ...

Just added right/left tooltips in the corners of the testfile: http://jspanel.de/beta/responsive.html

devmondo commented 9 years ago

@Flyer53

great ideas mate, and regarding device/feature detection, i think we should follow responsive design break points for everything, it will solve all problems easily, so if the tooltip implements that, it will adapt itself to the device size.

regarding the demo, the right tooltip is creating browser scroll bars when it moves in or out.

Flyer53 commented 9 years ago

@devmondo Yep! If a developer wants his website to work on all kinds of devices he'll probably use some kind of framework. Be it Bootstrap, Foundation or what ever ... And those frameworks already implement break points. So I don't think I have to invent something new concerning this. Some questions I ask myself:

should I offer an option to disable tooltips completely for small devices like phones? Tooltips on mobile phones don't work very good anyhow as far as I can see and some other plugins offer this option or it's even a default.
should a top/bottom tooltip (or maybe even a standard jsPanel) resize automatically (or optionally) on smaller screens when it overflows on both sides? I don't think a tooltip is the right place for a lot of space consuming content.

PS: Scrollbars in the demo. That's just a matter of setting body overflow properties and a decision of the developer.

devmondo commented 9 years ago

@Flyer53 great thoughts really and totally agree,

what i have is a suggestion that you may like

if you add an option that at a certain break point, the tooltip will turn into a simple div that will be appended before or after the target DOM element and has only a text hint showing and when user clicks on it it simply expands and show the content of the tooltip, i think this will be awesome hybrid approach.

Flyer53 commented 9 years ago

@devmondo If I understand you wright I don't think this is a very good approach since it would break the layout. The trigger of a tooltip can be anything. A button in a toolbar, an icon in an iconbar, an image, a nav item, table cell content, a list item ... and now an additional div squeezes in between.

Well, first things first ... Christmas lies ahead :)

devmondo commented 9 years ago

@Flyer53 maybe i didn't explain it well, what i meant is not to add any extras, just instead of showing the tooltip as a float element, we show it as expendable element under or above the item that triggered it, it is the same as when you validate for inputs, if user types wrong value a red text under the text input shows.

this will only happen if user defines it at a certain break point.

and merry Christmas mate :)

Flyer53 commented 9 years ago

@devmondo I see your point. But my previous comment still holds. The only way to implement this as far as I can see is that the developer plans for this in advance with an extra element in his markup wherever he wants it and I could add a tooltip parameter that takes a selector to adress this extra element. There is no chance that I can anticipate how a developer designs his page or where or how this tooltip "replacement" would be best. It always depends on the markup already there and this I can't know in advance. I'll think about this some more soon ...

Merry Christmas to you and your family as well. First time with your kid, wright! :)

devmondo commented 9 years ago

@Flyer53

i think you are totally right, and we can make this easier by having a trigger option in JSPanel which accept array of elements, so any of those element clicks or hover, will force the tooltip to show, something like this

var triggers = [{"button1":"click,hover"},{"Span1":"click"}]

if you noticed, we pass array of objects which let us decide what elements trigger the popup and what action, like click, or hover or both.

then to make the popup change from float to underline, we just make a breakpoint option like below

breakpoint:768;

so when browser width is this size or less, the tooltip will just change from float to show as inline element that slides under the element that triggered it.

maybe this is good idea and maybe not, but i am saying all of that, because on mobile device we have many problems like size and touch events, because a you know there is no hover event on mobile devices.

check these examples for tooltips that work nicely on mobile maybe it will help

http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-responsive-mobile-friendly/ http://stackoverflow.com/questions/7198756/touch-friendly-tooltip http://ux.stackexchange.com/questions/35738/what-are-the-best-practices-for-tooltips-on-mobile-websites http://www.inabrains.com/tooltip/examples/image-hotspot.html#example3

maybe the best idea is to drop all what i said above and just make it like this -keep the tooltip implementation as you made it -use responsive framework to make the tooltip responsive to any device width -ability to activate tooltip on both hover and click events to accommodate desktop and mobile -make tooltip close on any touch event on mobile device (stackoverflow link above)

and yeah first time with my kid and i don't have off, this life sucks :)

Flyer53 commented 9 years ago

@devmondo Yeah this is still something I think about back and forth ... In the end I want it to be as flexible as possible. Anyway, it's getting along step by step and I'll continue work on that next year.... which btw is only a bit more than a day away. Time runs like hell ;)

Thanks for sharing all your ideas and thanks for all your help :)

Happy New Year 2015 :)

devmondo commented 9 years ago

@Flyer53

thanks for the kind words and passion, i wish you all the best for your next year :)

Flyer53 commented 9 years ago

@devmondo @genachka @AviHafner

Interested in a beta of version 2.4.0? Grab it here:

http://jspanel.de/downloads/jspanel-2.4.0Beta.zip

or take a look at http://beta.jspanel.de/

What's new:

a lot of internal improvements enabling me to remove about 200 lines of code
a new option.maximizedMargin
changed css of header section, header toolbar and footer toolbar essentially making them flexbox-containers. That makes it a lot easier to distribute/align tooltip items and helps a lot with the rtl text direction implementation.

devmondo commented 9 years ago

@Flyer53 congrats on new release i l love the micro changes you made to the demo page and 200 of code eliminated that is amazing :) JSPanel is easly the best in the market no questions :)

i stopped using Angularjs and now i am investing in Aurelia.io, the ES6 forward thinking framework, so amazing, check it out.

also try 6to5.org it makes you write es6 code and compile it yo es5, this will put you in the future with backward compatibility and more lines of code to cut :)

Flyer53 commented 9 years ago

@devmondo What would I do without all your valuable tips ... :)

I probalby update the 2.4.0 beta this weekend with a new method reposition(newPosition [, selector]) that repositions an exsisting panel and optionally moves it from one containing element to another.

The use of flexbox will not be in the 2.4.0 release. It would kick out IE9 and I don't want to do that yet. Maybe I create a flexbox branch. Especially the RTL integration is so much easier with flexbox features.

genachka commented 9 years ago

@Flyer53 - Happy new year to you and yours! Looks like a lot of good additions to jsPanel in the past few months! Excited to play with 2.4.0 (likely next week). Keep it up! ;)

@devmondo - I ended up staying away from Angularjs as I didn't feel it worth the effort to learn when 2.0 would be a a huge redesign/relearn anyway. Not a fan of that approach. Been keeping my eye on Meteor but since I'm a fan of Couchbase and Meteor seems very tied to MongoDB, I've not actually used it anywhere. Aurelia.io is one I've not heard of before. Mind sharing why you chose it over Angularjs?

devmondo commented 9 years ago

@Flyer53 awesome man just trying to give shameful contribution and nothing more :) by the way can we modify the animations? i still feel they are slow or sluggish and sometimes you just dont want animation

@genachka man, i just got sick of Angular, i have been doing it for the past 2 years and go it enough of the complexity and making simple concepts over complicated, like Directives and services etc...

why i chose Aurelia, well first because of its creator who is Rob Eisenberg, he is a mastermind and well respected known person in the community plus he is the creator of Durnadaljs, in fact most of what you see in Angularjs 2.0 is his ideas, but he left them because they did not listen to him.

the second thing is that Aurelia is based on ES6 so it is just pure pleasure and you are set in the future while you develop, with the ability of backward compatibility with tools like 6to5.org that compiles es6 to es5.

with aurelia you don't have to think providers, services, etc... everything is just simple Class with metadata.

things like complex directives in angular are just simple in Aurelia, check the following code that i was able to create a redactor.js attachedbehvior in Aurelia which i can apply to any text area and i would have a full htmleditor

import {Behavior} from 'aurelia-framework';

export class Editor {
  static metadata() {
    return Behavior
      .attachedBehavior('redactor')
      .withProperty('value', 'valueChanged', 'redactor');
  }

  static inject() {
    return [Element];
  }

  constructor(element) {
    this.element = element
    this.editableArea = $(this.element);
    this.guard = false;
  }

  bind() {
    var _this = this;

    this.editableArea.redactor({
      initCallback: function () {
        this.code.set(_this.value);
      },
      keyupCallback: function (newValue) {
        console.log("1");
        _this.guard = true;
        setTimeout( () => { _this.guard = false; }, 10);
      }
    });
  }

  valueChanged(newValue) {
    if(!this.guard)
      this.editableArea.redactor('code.set', newValue);
  }

}

and to apply it in html just use

      <textarea id="content1" name="content1" redactor.two-way="content"></textarea>

of course i got some great help from the people there, but as you see abovethe code is so simple, imagine doing that with Angular directive!!!

also the gitter channel is so active there check it out

https://gitter.im/Aurelia/Discuss

if you need any other info please tell me :) i am never going to go back to Angularjs 1.x

Flyer53 commented 9 years ago

@devmondo Yes I know. I'm not really happy with the animations as well. But, believe me, I don't know how much hours I spent trying to get those animations nice and smooth. Either it's my fault somewhere or the jQuery animations simply don't work better ... I don't know. As far as I see it the only other option would be to remove the animations completely ...

Flyer53 commented 9 years ago

@devmondo @genachka

Just uploaded a new beta of 2.4.0 http://beta.jspanel.de/api.html including a download package http://beta.jspanel.de/downloads/jsPanel-2.4.0.zip

The majority of changes happened internally. But there is also a new method reposition(), a new option.panelstatus and a new property option. Just take look and play around a bit if time permits.

If your time permits take a look at #23. Thoughts are welcome :)

devmondo commented 9 years ago

@Flyer53 awesome man, you keep making this better, i am rally amazed i wish there were other components like JSPanel that have these options and the will you have to improve.

regarding animation, i say drop jquery animations all together it is sluggish and processor hungry, use css 3 animations, that is the way to go for simple stuff like opacity, position, etc.. trust me it will make things so much easier for you and smoother, and you can make it easily configurable by just exposing a class id so we can define our own animation classes if we want.

Flyer53 commented 9 years ago

@devmondo I removed most of the animations from the current beta. Made a few promising tests with velocity.js. But that would mean another dependency.

I don't know whether css3 animation would work. Take the maximize method for example. Size and position have to be calculated each time depending on window size. window scroll position, max within body or element, is maxtoScreen set or not ... I'm not really familiar with css3 animations but can you predefine a class with animations that calculate css property values on the fly when the class is applied to an element???

devmondo commented 9 years ago

@Flyer53

velocity is great, but as you said a new dependency, but i think it can be much simpler, i may be wrong, but the way css animation works is when you apply class animation start, so could you test that when maximize button is clicked, you add the animation calss name pragmatically, and use this animation generator if you want to experiment :)

genachka commented 9 years ago

@devmondo Thanks for the info! Will definitely look more in to it now. Hopefully it's not a huge learning curve and isn't going to be an almost rewrite soon like Angular 2.0 seems to be. I'm still doing a lot of Play Framework dev so I'm still hoping for something that is easy to learn and doesn't force me to have a lot of extra baggage on the client side that I don't need.

Flyer53 / jsPanel

responsive tooltips #18