I am make a tooltip that will be triggered by multiple elements. Minor details in the tooltip will be changed by each trigger elements. My question however is, is there any way to create a single tooltip, that can be triggered by more than one element?
You may want to take a look at virtual elements https://popper.js.org/docs/v2/virtual-elements/.
With this you can have one object which holds tooltip's coordinates and then later in the code you can trigger the change of coordinates from other elements.
Related
Google's Material Design 3 uses a so-called state layer for interaction states like hovering, focusing or pressing an element. These states are represented by adding a layer with a fixed opacity onto the element to change its colour.
I am currently creating a web application with Vue.js and using tailwindcss as my CSS framework, and was wondering if there is a simple way of creating these state layers. As far as I am aware, there are two possibilities.
I can either use a semi-transparent HTML element that has the same size, shape and position as the original element and set its colour and opacity to the required values. However, doing this for every element that can be interacted with would be a lot of work, greatly increase the size of my HTML code, and I do not think it is an elegant solution.
The second way I can think of is calculating the resulting color of adding the layer to the element, and setting this value when the user interacts with it. Calculating these values manually and stating them explicitly would also be a lot of work, and it would mean that whenever I change one of the content colours, I would have to recalculate all colours for interaction. Another possibility would be to calculate the values at runtime, which has the added benefit of making them dependant on the content colours, but that would mean that I have to access the tailwind variables inside my JavaScript code, and then set the corresponding classes by concatenating the tailwind class name with the calculated value.
While all of these solutions would be possible, I feel like they are neither simple nor elegant. Is there another way that I did not think of, or is the concept of state layers just not meant for these frameworks?
I have a dynamic table in .html that reads the data from the database to display all the elements, and they can obviously fall out of bounds when they reach certain amout.
I don't want to use scrollbar, but instead I want a box to appear if there are elements out of view, just to make it clear that you can still access them despite the lack of scrollbar.
Is there some Angular functionality that can help me with that?
We have a need to dynamically annotate certain points in an SVG rendering with some labels (divs).
Is there any algorithm that will allow us to dynamically determine the position for these label annotations that will fully avoid or minimize overlap?
The annotation would be a line from the points to a label (a div with some text)
Its something you need to create points dynamically.
Please refer to this link which shows dynamic random walk within points along with allocation.
Also you may go through the link for other details regarding SVG Animations.
I imagine that the answer to this question is no, but just in case I'm going to ask it anyway.
I want to use know if it is possible to use html5 drag and drop functionality without adding markup to the html (i.e., without adding draggable="true".
The reason I'm asking is because I want to use this within TinyMCE but I do NOT want to publish to the front end dragabble="true". I only want the drag and drop to function in the backend.
Any ideas?
P.S. I imagine I could see if there is a filter within TinyMCE for when the content actually gets published to the front end, but I would first prefer to see if it is possible to do this without a filter.
These things are draggable by default (ie. without any kind of attribute):
Links
Images
Selections
If you can make everything you want to be draggable be one of those things then you're OK, you just have to handle the events in the normal way. The easiest ways I can think of are:
Absolutely positioned images as 'drag proxies' (if they're absolutely positioned then they'll be out of the document flow)
Automatically select text on mouseover
However, I think it would be far more simple to add and remove the draggable attributes dynamically, eg. with jQuery (perhaps in the save event of TinyMCE):
$('#editor *').removeAttr('draggable');
Is there an easy library out there to do something along these lines:
I have a page with a lot of elements. At any given time I want to be able to put a modal on top of the entire page and just highlight one of the pre existing elements on the page to draw attention to it.
Most of the libraries I've seen revolve around dialogs that pop up and then hide the rest of the page. Are there any easy alternatives?
Thanks!
You can use a BlockUI script, then raise the single element's z-index to be above the block.
However, you'll need to make sure it's in the same stacking container; you may need to move it to the <body> and position it absolutely.