I am trying to have a custom tooltip for my images when the user hovers over them using jQuery Tool's Tooltip plugin. In the jsfiddle example you will see two rows. The top row is using the custom tip option, whereas the bottom row uses the regular title attribute.
As you can see, the tooltip sticks around when you mouse over them while the ones on the top row using the custom tip disappears when the mouse moves away from the image. They don't have an example in their documentation for this specific option so I am not exactly sure how it is supposed to behave.
I think it might just be a edge case in the tooltip code... they don't expect you to use the same custom content in every tooltip. But, if you make three divs with content and point the tooltips to each different one, it works as expected (updated demo):
Related
I want to implement ng-bootstrap tool-tip(or any other tool-tip if that works) which will be shown when user hover over the data present inside slickgrid cells.
I am also attaching a snapshot of expected functionality below. I need to show similar kind of black tool-tip with some information when user hovers over the slick-grid data.
This is not possible through formatters and when I am rendering an angular component inside grid cells so that I could easily use ngb-tooltip there, then the tooltip is getting cropped to the size of grid-cell's dimensions. Part outside the area of grid-cell isn't visible. Even high z-index not working for it to be visible.
Help me out in this by suggesting some methods to implement this.
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 have multiple dygraphs plots, which I would like to group in a collapsible jQuery widget, so that one could only show some groups of graphs. Sadly, this only works if the collapsible div is expanded at the start, if I start collapsed, the graph will not be drawn after expanding.
Although not a real solution, I could start with all all elements expanded. However, if the collapses some graphs and switches pages in between, they same problem occurs.
Here is a jsFiddle which shows the problem - set data-collapsed="false" and the graph will be drawn.
You might try calling g.resize() or g.updateOptions() on all the charts when the widget expands. These should be no-ops, but their effect is to force dygraphs to recalculate the size of its container <div>, which has changed due to the expanding widget.
To my knowledge, there's no way to tell from JavaScript when a DOM Element becomes visible or is resized in ways other than window resizes. This affects other JS libraries as well.
In some apps, when a user focues on a certain element, a tooltip will float at the bottom of the page which displays information about that element. For example:
Does anyone know of a good way to achieve this effect (preferably using Angular, although jQuery is also fine)?
Note that I'm NOT looking for the tooltip that hovers nearby the actual element itself, like so:
Instead, I'm interested in the tooltip that floats at the bottom of the page.
The control you are NOT looking to use is called a popover. A popover and a tooltip are both tied to an element on the DOM that has to be interacted with to be shown.
If you want to something in between that shows up in a fixed position on the window, use something like the angular port of Toastr and configure it to show up when and where you want.
Maybe you are looking for a plugin like the famous ToastrJS which can position a toast in the middle of the screen.
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.