I am in the process of making a form for my website and I need some tooltips on my input fields that explains what the user should type in that field. I've looked around for ways to style the title attribute as well as several ways with "span" and other tags, but nothing seems to work. Some of the methods worked on text, but none of them worked on an input field.
Is there any way to make such tooltips on input fields? The simpler the better.
Several ways to do this,
Jquery UI for example comes with a way to do this (https://jqueryui.com/tooltip/ )
or you could use a as a tooltip and trigger it on hover (or whenever) via js, this example: this example by Eric Kidd is quite similiar.
What you need to do to display your tooltip on hover basically is:
Style a label to be displayed whereever you want it(this will be your tooltipbox)
Define a .is-active class, which hides your label if it is not attached to your form-input
trigger the class on hover, for example like this
$(".form").mouseenter( handlerIn ).mouseleave( handlerOut );
function handlerIn () {
this.addClass("is-active");
}
function handlerOut () {
this.removeClass("is-active");
}
Related
When all of my inputs are set to "text" it works beautifully.
Example:
https://jsfiddle.net/beckah/62oozn3t/
However when I have additional HTML5 input elements, such as tel or email, my label refuses to float after typing in the field and than making another field active. To test, type in the "email" input and then select another input and type. you'll see that the label doesn't continue to float once not active
Example: https://jsfiddle.net/beckah/8zpd5n46/1/
Any help would be very appreciated.
Thank you.
As pointed out in the comments, your issue is with the :valid selector on your css in this section of code, as well as a few other places.
input.question:focus,
input.question:valid {
padding-top: 35px;
}
Because you are using the :valid selector, and your email or telephone in some cases is not a valid, it collapses, whereas with your text inputs, as long as it is not empty, it will not collapse again.
If you don't want to go through all the hassle of writing JavaScript, you can make it a normal text input and it won't have the # and .com keys available on mobile, but it will work as designed.
To fix this fully, you should check the input via JavaScript, as there is no way in CSS to see if a textarea or input has text inside. You can do this by basically checking to see if the value of the input is not empty, and if it isn't, adjust the css style via javascript with getElementById().style.padding = "35px";
I'm sorry there is no simple solution, but CSS doesn't have anything for inputs like this yet.
I am trying to get rid of HTML validation completely. This question would help if I had all inputs inside some forms. But I don't, as with angularjs I only need a form if I want to know if all fields in some set are valid. Moreover, HTML form elements don't stack, so I'm using ng-form only.
I actually don't care if the form gets validated or not; I only want to get rid of the red border in Firefox just like in this question. Is there a way how to style the glowing red to zero size or transparency or whatever? In Firefox I can't see it.
Alternatively, is there a possibility to teach angularjs work with some other attribute name rather than required, so that HTML5 doesn't jump in to visually destroy my page?
You can use :
:invalid {
box-shadow: none;
}
:invalid
Migrating OP's solution from the question to an answer:
Actually, there's a simpler possibility: As I'm using no HTML forms at all and I need some top-level container anyway, it can be a <form novalidate> instead of a <div>. Too simple to be seen.
I have a little bit of a problem here. I am making a kind of chat application in Flash CS5, using Action Script 3, and I am trying to make URLs that appear in the main chat textbox (where all of the things that other people have said come up), which is a TextArea component, be converted into HTML link tags. I have this working, but the problem I am facing now is that the links appear black. I want them to appear with an underline, and blue text. I am formatting the TextArea with TextFormat, and I am using some of the functionality that is only available in TextAreas, so I cannot use plain dynamic labels.
I have also tried using the style attribute of the link tag, but that didn't do anything.
How can I change the formatting for the link tags to appear blue and with an underline?
My current code for changing the links to HTML link tags looks like this:
txtOutput.htmlText += replace(/(?:http|https):\/\/\S*/g, function ():String
{
return '' + arguments[0] + ''
});
have a look at style sheets you can implement hyperlink styles form there.
update:
The textArea has a textField property. try applying he style sheet to that.
I've searched quite a bit, but all results reference using a custom image. I'm working with fluid layouts/retina displays and I'd like the button to be purely HTML/CSS.
Does anyone know a workaround/method?
Without seeing some code, I'd say hide the image with jQuery, then again use jQuery to create a new element with whatever content you want inside what I presume is the anchor tag used.
If javascript isn't supported, it'll show the image, if not, it'll show your new element (which you can style accordingly)
edit: ok, some clarification... use jquery to hide the existing input type="image"... then use jquery again to create a new input of type submit, do whatever you need it to do
Here's a fiddle to explain: http://jsfiddle.net/erinfreeman/PFZY8/
If there's a better way of doing it, I'm all ears. As below, I don't think jpann can add any additional code else it would simply be a case of hiding the existing input field and adding another.
Hi I was working on a project and the client wanted custom paypal buttons. I found a great site that provided custom code for the button: http://www.daddydesign.com/wordpress/how-to-create-a-custom-paypal-button-without-images/
You simply replace the input type="image" tag with an input type="submit" and style it. Hope this helps.
I want to practive, and even best-practice, with Html+JS+CSS.
I use a one page client-only Sudoku page.
My Sudoku markup is basically a <table>, with <td>.
(I'm open to suggestions to improve this).
My requirements :
Have a cell under focus (the keyboard notion of focus) (highlighed with css to a yellow background)
Navigate through cells with arrow keys (plus Home etc).
type-in an integer value sets that value to the currently focused cell
I use an input button inside each cell.
The Javascript works fine.
My only problem is with the display.
When a cell has the focus, it's highlighted display doesn't cover the whole TD, rather only the visual space included in the input button. I have some space around the button that isn't 'yellow'.
I don't think I could go up in the CSS selection, to select the parent of the input, could I ? Such as :
input:focus '?? how to go up ??' td { background-color:yellow;
I tried a few tricks, like having always 5 characters in each button display (5 spaces when empty, changing the middle character when set), but nothing is visually satisfying.
Even worse, it is clearly against best-practices to alter the content for the sake of visualizing. That's what the MVC distinction between Html/Css/Js is for !
I already searched this site for answer, I found close but distinct questions and answer.
I'm hoping someone could help improve my page ... and my markup skill :-)
It is not possible to construct a css selector which matches a parent node dependent on a (pseudo-)class of child node.
Basically you have two options to choose from:
Try to fill the td with the input completely using height and width rules in your css.
Set 'focused' and 'unfocused' class on your tds with javascript using the onfocus and onblur events of the inputs.
Could you not use a dash of jQuery to set a .focused class and then apply some style to it?