Tooltip positioning

[Bauer]

I wrote some code to fix tooltip positioning and put in the pull requests at github.
That was over a year ago!

Sorry, I never learned how to combine files into one pull request, so they are in 4 different pull requests (1762 thru 1765)

Attached are screen snips of the same form with and without my fix.
(And please excuse the lousy quality of the images but I had to take them with my phone since I couldn't find a way of capturing the tooltips from within Windows.)

As you see in tipBad.png - the tips, with the existing Fabrik code, are unacceptable (not readable).
Any tips that are in elements to the far left or far right of the form/screen will get truncated.

My fix at github fixes that. It also fixes the positioning of the pointer so that it is automatically positioned wherever the mouseover event occurred. (On elements where the element is narrower than the tip, the arrow would actually sometimes appear as if the tip belonged to the adjacent element to the left or right. That's not too professional looking either, confusing to say the least.)

I also included in those changes an element configuration option to allow for setting the tip in any element to a specific width - for those special cases where tips contained so much text that they had more vertical height than width and may have run off the top or bottom of the screen.

So this is yet another plea to commit my pull requests. I spent the day today updating that code once again and it seems to all work just fine. e.g. IMO, the way it should be working!

I'm also hoping that maybe someone who has been able to afford to help support Fabrik better than I do will speak up and back my request - since that seems to be the only way things get done.

I'm just thinking that I may be speaking too soon (as I often do) and realize I never tested on browsers other than Chrome. So I'll test with all 4 of the Browsers I have installed on my PC and let you know how it goes.

 

[Bauer]

OK. I tested this all day on IE11, Firefox, Edge, and Chrome and give it a 2-thumbs up. (After tweaking the code yet a little bit more to fix a few small issues I found while testing)

So Hugh, if you can hear me - PLEASE implement this into the Fabrik core.

I should probably explain that I have a custom template that I often use, named 'bootstrap fluid' , which basically will paint elements in various widths as inline-blocks wrapped to the screen width - so there are no predefined positions like the normal bootstrap template that forces the elements to always look like they are in a checkerboard.

That's why the tip placement might look OK in one window, but if the window width is changed the elements will wrap to different positions and the whole 'position' setting in the tip is pretty much useless. This takes care of all of that - plus allows you to set the tip width wider for wide elements and narrow for narrower elements - on an individual basis. What's not to love about this?

 

[cheesegrits]

Have you tested on mobile.

Sent from my HTC6545LVW using Tapatalk

 

[Bauer]

Have you tested on mobile.

Sent from my HTC6545LVW using Tapatalk

Works fine using Chrome on a Moto X Pure.

 

[cheesegrits]

And how does this affect all other uses of tips that aren't set up in tipOpts() in the element model? Do they now hard wire to 276px? or for sites that update, and don't have the new width set ... do their element tips now stick at 276?

I'm just trying to figure out what behavior this changes for existing use cases.

-- hugh

 

[Bauer]

You know better than I where else tipsBootStrapMock.js might be used.
But I'm trying to think why a default max-width would be a bad idea regardless?

I can't even remember where I came up with that 276 number. (Maybe I found it used for tips in another javascript file and I though that was the default?)
In doing some research today I found that the default max-width for BS2 was 200px. and for BS3 it's 400.
But I also read that smart phones are usually 320. It's hard to keep up when reading archived articles about changing technology. So I have no idea what is really pertinent or normally used today.

I'm not really sure what was controlling the default width before I changed to my code - but it seemed to be a fixed width too. Or there was at least a min-width setting - because I remember that the tip's width wasn't reduced in a simple 2-word tip. But that could have been set in some css somewhere that I'll never track down

That's the hard part about working with tips. It's hard to debug because when you go to click outside the tip you lose the tip and all the css and DOM info related to it.

Besides Fabrik I also use the tips from Regular Labs and JCE and JQuery - so it wouldn't surprise me if css from one or the other, between the 4, is using class names that cause some stepping on toes.