Develop Reference

How to trigger tooltip on hover over floating label inside input element

I have a form where currently the label (span element) is separate from its input (text) field, but as part of a redesign it will move into the input field as a floating label (see jsfiddle below). However we also have a tooltip that shows on hover (onmouseover) over the label, and when the label moved into the input field the hover no longer triggers.
Obviously I could make the entire input field or the encompassing div trigger the tooltip or something to that effect, but that would get in the way of the actual input.
So I am looking for either a way to make it trigger on only the label text within the input field (wherever it may currently be, since it moves slightly based on focus), OR some way to integrate an icon into the input field that would be a static trigger point for the tooltip (which would still require some way of triggering hover on a specific element or limited area within the input field).
Is this even possible, or should I look for an alternative solution involving something outside the field?
This fiddle contains the basic structure and CSS to show what the field looks like: https://jsfiddle.net/xwoczh0a/
<div class="form-textbox">
<input type="text" class="form-textbox-input" name="x" id="x" aria-labelledby="x_label" placeholder=" ">
<span class="form-textbox-label" onmouseover="tooltip.show('Enter tooltip here');" onmouseout="tooltip.hide();" id="x_label" aria-hidden="true">Question goes here</span>
</div>
I hope this makes sense, happy to provide more details if not.

Is there a wat to style just the user input text in a <input type ="text"> not the input field itself?

I am using Cordova to make an android app and I have a text field where the user types into. Im using a keyboard function so I can listen for the done key on a text field. When the event fires I want to be able to "animate" the text that was just entered into the field. I don't necessarily want to animate it, but really just put a circular box around the text so that its clear the input has been accepted.
For example:
This is what it looks like after they've typed their text and before they've pressed done on the keyboard.
Text input before submit
When the event fires I want to style the text as such where the font weight changes and the background of the text gets bubbled. Is this possible?
Text input after submit

In the function that you're using to listen for the done key, you can use Element.classList.add() to add a class to the <input type="text"> element.
const inputElement = document.getElementById('your-input-element')
inputElement.classList.add('recipent-submitted')
Then apply whatever styling you want to .recipent-submitted in your CSS file.

Input field with buttons or spans inside

I have a feature in mind for an interface I'm developing but I'm not entirely sure of how to bring it to fruition. I'm basically after an input field with a set of buttons to the side which insert a span/button inside the input to represent the button clicked.
So in a simplified version of my imagined interface, I can type into the field as normal but when I press one of the buttons to the side, they also insert text into the field. Let's say if I press button 1 it inserts the text "Hello" and button 2 inserts the text "Emma". Fairly easy.
The more complex version which I want to create works similarly, but when I click button 1 it inserts a bubble inside the text field. The bubble has its own background colour, contains the word "Hello" and has a small x in the top right to dismiss it. When the bubble is inserted it moves the carat on past the inserted bubble and I can continue to type as normal. If I hit backspace when the carat is to the right of the bubble, it deletes the entire bubble at once. Here's a simple example image:
I feel like I've seen this kind of thing on the internet a lot but I can't work out how it's done. Is there a way to pull this off with an input field? If it's not possible which alternatives should I be looking into?

I don't think you can do this with just an input unless you go change the standard implementation of input for your page :)
I think your best bet would be to have a structure like this:
<div class="wrapper">
<div class="shownContent">Is that <div class="tag">Emma</div></div>
<input class="underlyingInput"/>
<div class="tagsButtons" />
</div>
undelyingInput is hidden - available but hidden.
Style shownContent to look like an input.
You then handle clicks on shownContent: if they click shown content, focus the hidden underlying input, BUT show shownContent as focused.
Now if the users start to write after they clicked on shownContent, that text is actually going into the input!
When value changes in the input, use the new value to parse it into text and tags, and set the html content of shownContent
Once you got this, removing tags from clicks on the left and adding them from clicks on the right should be straightforward.

You could try using a series of inputs, instead of just one:
<div class="wrapper">
<input /> <!-- "Is that " -->
<button>Emma</button>
<input /> <!-- "? " -->
<button>Hello</button>
<input /> <!-- ", " -->
<button>Emma</button>
<input /> <!-- "!" -->
</div>
The wrapper is just for styling purposes: you'd give it a border and make the input elements borderless.
You'd need to override a lot of keyboard commands on the input elements. For example, backspacing at the beginning of that last input would cause the preceding button to be deleted, and merge the contents of the two adjacent input elements.
You'd also need to consider the effect of hitting the Home and End keys (and equivalents in other OSes).
Moreover, you'd wanna make sure the input elements will resize as their contents change. It's a little tricky, but doable!
Here's a jumping off point: https://codepen.io/exonj/pen/jxQxGV

This is a tagsinput. Checkout this
Bootstrap TagsInput. It has the same functionality as you wanted.

Make a text clearable with a close button on click of Submit button

I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.

One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)

onBlur Javascript event with check if an element has focus

I am trying to find a solution to a simple thing, that looks complex!
I have a textarea where users can update their status.
Underneath it I have a checkbox (ex: for the user to choose to tweet the status or no).
What I try to do is this:
1/ When the textera get the focus, the textarea expands, for that it's fine.
2/ When the textarea loose focus, so when the user clicks out of it, it collapse. That's fine too...
The only problem is that if the user click on the checkbox, the textarea collapse too but I want to prevent it.
It should collapse and execute the function on blur, but not if the user try to interact with the checkbox.
I set up an example on this page: http://favosaurus.com/dev/onblur.php
thanks for your suggestions.

You're going to need to use Javascript.
Pseudocode:
if input blur, and checkbox not clicked:
do normal blur action.
else:
process checkbox click
focus input again