Javascript - Dynamic Tooltip in TextBox - javascript

I'm attempting to get the following functionality, but can't seem to find a good way to do it:
There's a textbox where the user inputs some text, for example, "The apple is red." I then want a custom tooltip to appear depending on which word the mouse is hovering over.
So if I mouseover apple, I want to see a tooltip saying Apples are a fruit!, if I hover over red, I want to see Red is a color!, but I don't want anything to happen if I over over either The or is.
Any ideas?

this is (probably) impossible with a normal textbox.
You'd have to use a "contenteditable" element (e.g. div) and wrap words in tags (e.g. span) while user is typing...
Usually tooltips need a target, which must be a html element. I haven't seen a tooltip that you could attach to a single word inside a tag.

Related

Select text occurrences in dom provided by input text

I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.
Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.

Highlight certain words in input form without using tags?

I need to highlight certain words in Twitter input form as user types their tweet but apparently Twitter has a script that protects the form and removes any HTML tags that I put in there. Is there any way to do this without using tags?
The only way I can think of is to use getBoundingClientRect() and draw an overlay over the box while the user is writting.
getBoundingClientRect() is expensive, but running at user typing speed is no problem actually.
It will return the absolute position of the element from the top/left margin of the window, so you can create an absolute (or fixed I guess) element over the box and set the received position to your elements.
I guess that the fastest way is to process the text and create HTML tags like you do now, and then get the getBoundingClientRect() and create the overlay of each tag. Twitter then will reset the input to whatever it wants, but you already got the getBoundingClientRect() as long as you do that in the same event loop when you create your tags (before Twitter modify nothing).
IMPORTANT: Don't forget to add pointer-events CSS to none so no mouse clicks are catch by your overlay.
pointer-events documentation here
getBoundingClientRect documentation here

Select text in contenteditable after it has changed

I am about to write a input system for a web application that is a bit more complex. We have Labels in our text that are weather displayed as a bootstrap label (when the contenteditable div is blured) or displayed as handlebars e.g. {{firstname}} when the text is focused.
The changing in states is done by jQueries $().html(content) where I change the content based on the source when I focus the text field.
The problem is: if I click the text, I don't want to need to click a second time to place the cursor, because the text changed. It works as long I don't click inside of a tag but inside the contenteditable root element. but if I click inside of a tag inside the contenteditable, the cursor is not set.
my idea was to get the mouse position when clicking the contenteditable and then set the text cursor to exact that position when I have changed the text. But while I know, how I set the cursor to a specific offset inside a text node, I have no clue how to get this necessary offset when clicking. any ideas?
Edit: Here is the behaviour in a little screencast: https://youtu.be/RZvHxxM6wsQ
Edit2: Here is the problem reproduced on the smallest kind of working example:
https://jsfiddle.net/8z5Lnxef/3/

How do I highlight the parts of the image that is clicked or dragged, and save that area?

I essentially need to have a user online click drag with the mouse or fingers on a picture of the human body to highlight the selected area red. Basically they're selecting areas of the body that hurt.
Then I need to store this information, and use it as needed.
Looking online I just seem to find how to highlight an area on hover like JQuery's maphighlight feature, which isn't what I want.
I'm very new to coding but am learning as I go along.
There are more pseudo-classes than hover. In this case, active or visited.
You could simply change the selected image section to a highlighted version of the same image.
Or add a border CSS property on :visited
To store information use either a made up data-[whatever] attribute,
or use a regular JavaScript variable. Since you'll need JavaScript to use the given variable anyways.
There are fancier solutions.
MAP is great for selecting shapes within an image, but doesn't have a way to highlight that selection.

JavaScript/jQuery: Is there any way to use a function on a table only when it is in focus?

I'm really new to JavaScript, haven't even finished the track on Codeacademy yet. But I did finish jQuery, HTML/CSS, and Python so the logic at least isn't completely foreign to me...
Anyway, I made a testing page to try to practice my JavaScript skills for the first time, what I ended up doing was making a "color selection" div that will change to different colors when you click on it and then a large table full of different cells that will change to the color of the "color selection" div when the mouse hovers over it. So basically a very simple coloring board. But the way it is, you can't just click on the canvas and start coloring, it'll change colors anytime your mouse enters that part of the screen whether you selected it or not.
The "canvas" itself is just a large table. And if I'm understanding correctly, I can't just use .focus() on a table.
So I guess to put it simply... what I'm wondering is if there is any way to say "when this table is in focus, do X when the mouse hovers over (this)".
Or else, "when the user clicks in this table, make these cells change color when the mouse hovers. But when the user clicks outside of the table, stop doing that."
Is this even a possibility or did I go about this all in the wrong way?
Maybe try this:
SEE DEMO
$('#myelem').attr('tabindex',-1).hover(function () {
if (document.activeElement === this) {
console.log('hover');
}
});
Setting tabindex attribute is for crossbrowser support of focus event as in some browser, by default without setting tabindex, some html element don't natively support focus.
BTW, if you don't want focused element to be restyled by browser, you could add this css to the elements:
$('#myelem').css('outline',0).attr('tabindex',-1).hover(function () {...});

Categories