Working on a small Tooltip component. Running into an issue where the tooltip on mobile goes outside the screen and gets cut off. I'm wondering if there's a way to detect that and then use that info to switch the direction so it's not cut off.
Here's an example of what i'm dealing with
Some more details - Tooltip component wraps around a word in a 'p' tag and add tooltip on click.
Related
I am experiencing problem with white-space which appears after I double click on some of my website elements when I am using IPhone.
Soulika here you can try it on your own if you access from IPhone and zoom with double click you will have white-space which follows you along with further movements.
Mostly happends when I am zooming footer part, but actually might happen everywhere.
I were able to find the problem and soultion.
Problem:
I have hidded html tag scrollbar and moved it to one of my inner containers inside DefaultLayout;
This work complitely fine before we start to talk about IPhone cross-browser compatability.
Once I try to zoom my content inside content container it propagetes zoom event to parent component, but from some reason instead of stoping at the point of my DefaultLayout wrapper - element which has overflow activated and height defined in px( mandatory in order to configure overlow ) it propagetes up to window and zooms window itself.
Solution: I have changed the approach and moved the overflow back to html which is now pretty much content element and window is a wrapper with predifined height. Now everything works complitely fine as zooming accessing my content and do not propagets to parent.
I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.
I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.
You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.
I'm using NVD3 1.8 for charting and I've implemented a custom tooltip because our visual design department didn't like the one that the library came with. I've been able to implement most of the design, but I have one problem:
The arrow on the tooltip needs to point to the guideline whether it's on the right or the left. I made this arrow using CSS and I can easily add a class to move it to the other side, but the problem is figuring out when to apply the class. When the user's mouse gets too close to the right side of the screen, the transform: translation() value of the tooltip is changed so that it appears to the left side of the mouse rather than the right.
This is done based on the width if the tooltip, NOT a static distance from the right edge of the screen (I know this because my tooltip dynamically resizes based on its contents, and a tooltip further to the left can sometimes be flipped left by having larger number values). I don't know how to access the "flip" information programmatically, as it seems to make this check after the tooltip is already rendered. How can I get around this conundrum?
Is it possible to just decide that if the guideline is on the right side of the screen then make the tooltip go to the left, and if it's on the left side make the tooltip go to the right?
You could perform a calculation where you just take the width / 2. This is what I do whenever I have a tooltip. I also move the tooltip below the cursor when it's on the upper portion of the page and move the tooltip above the cursor when it's on the bottom portion of the page
Hope this helps.
I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.
What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.
Now the part that I need help with is this:
I want to figure out exactly what content is behind the div (let's give it an ID of #glass).
Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified.
If you have a better idea on how to 'magnify' the content please share it.
So what I am looking to do in a spot of pseudo-code is:
Get position of #glass.
Get content behind #glass.
Store that in a variable or give it a class or something to refer it to.
Append a span before and after.
Style it with scale-transform.
Undo and reset the above when #glass moves.
I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.
You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.
So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.
Here a is Jsfiddle demonstrating how this could be done:
http://jsfiddle.net/wWVuy/
I have a div, that I'm using JavaScript to position, so that when someone hovers over an image, it displays a tooltip message that follows along with the pointer. (Using tooltip-0.2.js )
The problem is that when a user goes to the page in IE6, a disabled dropdown box on the page is showing through this absolutely positioned tooltip when it tries to hover over it. How can I get this dropdownlist to know its proper place? ;)
You can put an iframe element behind your layer to block such things from showing through. It will also block Flash objects from showing through. It's messy, but works.
You better use another tooltip lib.
The "shining-through" effect is well known and other tooltips work around it.
I can't name a specific other tooltip lib.