Placing a CSS Tooltip in the Right Spot

As a novice in CSS, I am struggling with implementing a tooltip. The issue regarding focus has been resolved, thanks to realizing a small typo in the code.

I have created a CSS for a tooltip, but I am unsure where to place it and how to ensure it only appears when a textfield is selected.

Check out the Fiddle here: http://jsfiddle.net/v8xUL/274/

.tooltip
{
position: absolute;
padding: 1px 10px;
margin-left: 6px;
background: #06DEE5;
font-size: 12px;
line-height: 20px;
color: #000;
-moz-box-shadow: 2px 2px 3px #444;
-webkit-box-shadow: 2px 2px 3px #444;
box-shadow: 2px 2px 3px #444;
}

The CSS above was extracted using "Inspect element" from a website.

Currently, the tooltip displays even when the textbox is not selected, as shown in this image: . It should only show the message "Please enter name" when the textfield is selected.

htmlcss

Answer №1

It is recommended to utilize the "display" property

.tooltip 
{
    display: none;
    position: absolute;
    padding: 1px 10px;
    margin-left: 6px;
    background: #06DEE5;
    font-size: 12px;
    line-height: 20px;
    color: #000;
    -moz-box-shadow: 2px 2px 3px #444;
    -webkit-box-shadow: 2px 2px 3px #444;
    box-shadow: 2px 2px 3px #444;
}

form input[type="text"]:focus,
form input[type="number"]: focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus
{
    background: #06DEE5;
}

 input:focus + .tooltip {
    display:block;
}
}

Answer №2

Your jsfiddle is missing a form tag, causing the provided CSS to not work properly.

In order to target the tooltip, you can use the sibling selector +. This selector will pick the immediate next DOM element and apply changes according to the specified CSS. For example, we can target a sibling with the class 'tooltip' and change its background to red with this code:

input:focus + .tooltip {
  background:red;
}

I have updated the fiddle to incorporate the sibling selector:

http://jsfiddle.net/v8xUL/267/

Edit

If you want to hide the tooltip until focusing on the element:

Initially hide the tooltip:

.tooltip {
  display:none;
}

Show the tooltip when focused:

input:focus + .tooltip {
  display:block;
}

See the updated jsfiddle: http://jsfiddle.net/v8xUL/269/

Answer №3

Take a look at this example: See Demo

CSS Styles:

.input-field {
  appearance: none; 
  font-family: 'Roboto', sans-serif;  
  line-height: 1;
  width: 100%;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  margin-top: 2px;
  color: #666;
}

.info-box {
  display: block;
  visibility: hidden;
  overflow: hidden;
  box-sizing: border-box;
  height: 0;
  margin-bottom: -8px;
  cursor: help;  
  padding: 4px 16px;
  background: yellow;
  color: #000;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}
:focus + .info-box {
  margin-bottom: 0;
  height: auto;
  visibility: visible;

}

HTML Markup:

<input type="text" pattern=".{5,100}" required title="At least 5 characters" maxlength="100" name="contact_name" class='input-field' placeholder="Your Name" title="Please enter your name." />
<div class="info-box">Don't forget to input your name!</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize the power of Vuejs' v-for directive to populate not only the table rows, but also its header with

Can a single object be used to populate both table headers and rows? I attempted to do so with the code below: <table v-for="(table, index) in tables" :key="index"> <thead> <tr> <th> {{ table. ...

htmlvue.jsloopshtml-tablev-for

Steps for removing form validation from non-conditional formControls

My issue is with a form-control that displays a success mark after submission, even though there are no validation conditions in place. Is there a way to disable this validation? <Form noValidate validated={validated} onSubmit={e => this.ha ...

cssreactjsreact-bootstrap

Tips for resolving issues with media queries in CSS

After deciding to create both desktop and mobile versions of my site, I attempted to utilize media queries in CSS. Unfortunately, after coding them, I discovered that they were not functioning as expected. Seeking a solution, I turned to Youtube where I ca ...

htmlcssgoogle-chromemedia-queries

Why doesn't the visibility or display change when focused?

I came up with a unique idea for a search feature where clicking a "button" would reveal and expand the input box. Instead of using a hidden checkbox, I decided to experiment with using a label because clicking the label could focus on the connected elemen ...

htmlcss

Instructions for setting the value of a <input> element using scope

Having Trouble Passing Scope Value to Hidden Input Type I am facing an issue with passing the scope value to a hidden input type. Despite my efforts, I am unable to make it work as intended. Instead of displaying "PremiumVal", I need it to display "75" ba ...

javascripthtmlangularjs

Automatically load file and play audio when the page is loaded

I have created code that allows me to input an mp3 file, output the audio, and display a visual representation of the music. Currently, loading the file is done manually through an input type="file". Now, I want to change it so that the music automaticall ...

javascripthtml

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

What is the best way to align my Dropdown text to the left?

Is there a way to align my Dropdown and parent submenu text to the left, while keeping my tab text always justified to the right? Below is the code snippet: <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ ...

htmlcss

What could be the reason my bootstrap timeline isn't displaying the correct styling?

My code isn't functioning properly. I am attempting to build a timeline using bootstrap for my work/education. I have taken HTML and CSS from a timeline example on W3Schools but it is not rendering the same when viewed in the browser. Instead, there i ...

htmlcssbootstrap-4

Remove each notification automatically in JavaScript after a specified period of time

I'm currently developing a basic notification system. Check out the jsfiddle I created here: https://jsfiddle.net/t9pvmzhh/3/ For some reason, jsfiddle is not showing all 4 notifications even though they display correctly on my end. I suspect there ...

javascripthtmlcss

Avoid duplication of elements in Angular applications

Currently, I have a component that loads animated divs based on a datasource. *Note: In the example, I've used a lot of <any> because I haven't finalized the model yet. apiService.ts dataArray: Observable<Array<any>>; constru ...

javascripthtmlarraysangularobservable

Having Trouble With Your Font Display?

I am confident that my code is correct. Here's a snippet from what I've done: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="homepage.css"/> </head> <body> <div id="menu"> &l ...

cssfontsfont-face

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Exploring the Depths of HTML with Jquery

This is an example of HTML code I am working with: <tr> <td> <div><span id="temp" /> </div> </td> </tr> <tr> <td> <div><span id="temp" /> </di ...

jqueryhtml

Order verification through the browser's geolocation API

How does the Geolocation Browser API detect a visitor's location? According to the W3C Geolocation info site, the API utilizes a combination of IP, Wi-Fi, Cell-Phone, and GPS to determine a user's location, but it is not specified in what order ...

javascripthtmlbrowsergeolocation

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...

cssheightcss-transitions

Tips for creating an expandable div with floated content

I am looking to create a flexible div that expands based on its content. Inside this div, there are two floated left divs with fixed widths. These inner divs should also expand according to their text content. To clear the floats, there is another div wi ...

htmlcsscss-floatcss-position

PHP file is functioning properly, yet no Ajax response received

I have a straightforward sign-up form for a mailing list. It sends the user's email address to a store-address.php file using jQuery's ajax object to make the request and receive a response. The issue I'm facing is that I'm not receivi ...

phpjqueryhtmlajaxxmlhttprequest

The customized cursor image fails to load after switching the application URL from http to https

After implementing a redirect from http to https in my application, I encountered an issue with custom cursor images not displaying as intended. Prior to the redirect, the custom cursor images worked fine and were visible on the page. The URL for these cur ...

javascriptjquerycsshttpscustom-cursor

What are the best strategies to perfectly insert an image within a div, ensuring that no background color is visible?

Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...

htmlcss