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.

I need to hide a placeholder when focusing an input but showing instead the label of that input

I have been looking for how to fix this, I have applied scss and css, also javascript.
I need my input to show a placeholder when it opens normally and when you focus on it it will display its label and look small as in this photo I have.
https://i.stack.imgur.com/VxEqE.jpg
This is the input code and the label I’m handling serves me any code, ts, js, css, html.
<label> Contraseña </label>
<input placeholder='Ingrese su contraseña...' [class.isinvalid]="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<div *ngIf="loginForm.controls.contrasena.invalid && (loginForm.controls.contrasena.dirty || loginForm.controls.contrasena.touched || isSubmited)">
<small *ngIf="loginForm.controls.contrasena.hasError('required')">La contraseña es requerido</small>
</div>
</div>

You can find this in angular material library, if you are planning to use in your project with more options.
https://material.angular.io/components/form-field/overview#form-field-overview
Else, you can build your custom input from this post.
Move placeholder above the input on focus

you don't have to hide the placeholder & you can't. you can do it easily --
transform the label a bit down to the exact location of placeholder.
increase the font-size of label.
set focus state of input set the transform of label to normal and decrease the font-size of the label.
to provide transition to this whole process use transition property in css.
to make everything work perfectly add a click handler to the label so that whenever it is clicked it focuses the input. document.getElementById("mytext").focus();

Getting user input text without HTML input elements

Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.

Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>

But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.

Take a look at x-editable. It will suit your needs, i think.

How can I clear input text in bootstrap -UPDATED

I have a simple modal in bootstrap 3.0.2 and it has a 2 simple input type="text" I would like to clear it. I have seen example but they are for bootstrap 2 and don't work with my modal. Does any one know how to clear or reset this input text inside a modal when I click on the "reset" button.
-Thank you in advance.
Update: after using #davethecoder solution works like a charm, I still need help clearing 1 of the input text its under the date class:
<input id="#item" type="text" class="date-picker form-control" />
Any chance anyone knows how to clear this one?
-Thank you for helping me.

twitter bootstrap is a CSS framework for modelling response web layouts. If you are using jquery, the code to clear an element is $("#itemid").val('');
easiest would be to give each item a class, and set this value based on class, or as an alternative, you can loop through items of specific formid and reset to clear that way. Personally I would just do this class based, as this will essentially have the loop code per item, within the jquery framework.
I mentioned jquery here, because you had a jquery tag

Oh,just I found that the attribute id of your input element contains '#',it may lead to some unknown mistake. It is best to remove the '#' on your <input>.
If you are using jQuery, just use a function call like this to clear input:
$('#item').val('');
If you're not using jQuery, just use Javascript function like this:
document.getelementById('item').value = "";

Disable editing part of input box

I know I can disable/lock part of an input box using
<input type="text" disabled="disabled"/>
or
<input type="text" readonly="readonly"/>
but I want to have
<input type="text" value="[[inputbox|edithere]]"/>
where the user can only edit edithere
I have tried to google this, however the only related things I can find are how to disable an input box completely or disable certain keys.
I don't know the input boxes id or how many there are (dynamically created via php onload), but I know that they will always be a pipeline and two ]] bookending the value I want to edit.
EDIT
http://jsfiddle.net/7rTMK/

You can't do this with a stock input just manipulating attributes.
However you can simulate this with css and some extra markup:
<div class="wrapper">
<div class="static text">static text</div>
<input class="text" type="text" />
</div>
Position "static text" div on top of the input and add left padding to the input text.
example http://jsfiddle.net/MTEec/

It's impossible. Use a tag to wrap the input, and put the uneditable parts before, or after the input, and style the tag to look like an input, and style the input to match that styling.
If you need the form to send all the data, create a hidden input after your input, and update it's value with JavaScript (to the static and the input's text concatenated) upon changing the value of the main input. That way when the form is sent, the later hidden input with the same name will be used.

While it's not entirely impossible to do, it would be extremely difficult to do and it's a very bad practice to try doing something like that, at least for your use case.
You should obtain the user input without restriction inside your input box, if you want to add square brackets or the such, you can add them later using either Javascript or your service side language.
Alternatively, if you really wish to display the characters inside the textbox, you can use claustrofob's solution and mess around with the CSS.