"Required field styling with tooltip"
Bootstrap 3.1.0 Snippet by rusboard

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form role="form" style="width:400px; margin: 0 auto;"> <h1>Contact us</h1> <div class="required-field-block"> <input type="text" placeholder="Name" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <div class="required-field-block"> <input type="text" placeholder="Email" class="form-control"> <div class="required-icon"> <div class="text">*</div> </div> </div> <input type="text" placeholder="Phone" class="form-control"> <div class="required-field-block"> <textarea rows="3" class="form-control" placeholder="Message"></textarea> <div class="required-icon"> <div class="text">*</div> </div> </div> <button class="btn btn-primary">Send</button> </form> </div>
input, textarea, button { margin-top:10px } /* Required field START */ .required-field-block { position: relative; } .required-field-block .required-icon { display: inline-block; vertical-align: middle; margin: -0.25em 0.25em 0em; background-color: #E8E8E8; border-color: #E8E8E8; padding: 0.5em 0.8em; color: rgba(0, 0, 0, 0.65); text-transform: uppercase; font-weight: normal; border-radius: 0.325em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background 0.1s linear; -moz-transition: background 0.1s linear; transition: background 0.1s linear; font-size: 75%; } .required-field-block .required-icon { background-color: transparent; position: absolute; top: 0em; right: 0em; z-index: 10; margin: 0em; width: 30px; height: 30px; padding: 0em; text-align: center; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; transition: color 0.2s ease; } .required-field-block .required-icon:after { position: absolute; content: ""; right: 1px; top: 1px; z-index: -1; width: 0em; height: 0em; border-top: 0em solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 0em solid transparent; border-right-color: inherit; -webkit-transition: border-color 0.2s ease; -moz-transition: border-color 0.2s ease; transition: border-color 0.2s ease; } .required-field-block .required-icon .text { color: #B80000; font-size: 26px; margin: -3px 0 0 12px; } /* Required field END */
$(function() { $('.required-icon').tooltip({ placement: 'left', title: 'Required field' }); });

Related: See More

Questions / Comments:

Beautiful work

Fabian Manzano () - 3 years ago - Reply 0

What about select items ( list ) ?

Sam () - 3 years ago - Reply 0

Useful snippet. When used in date control then the date control dropdown is unaccessible as the "required-field-block" sits on top of it. Is there is anyway we can do the required-field-block as left alighted so that other control specific functionality will not be disturbed.

Ravivit9 () - 4 years ago - Reply 0

really simple UI. Really like this one. Bravo

Sekai92 () - 5 years ago - Reply 0

Corner image doesn't move along with the field border as it's resized.

Mike () - 5 years ago - Reply 0

It blinks when hovered, but really good UX.

Rafael C () - 5 years ago - Reply 0

Hi, what OS and browser version?

Rusboard () - 5 years ago - Reply 0

Windows 8.1, lastest Chrome

Now, I'm in Ubuntu 14.04 Latest Firefox it runs nicely = )

Rafael C () - 5 years ago - Reply 0


sara () - 3 years ago - Reply 0


d () - 3 years ago - Reply 0

Happens to me too. Windows 7, latest Google Chrome.

Alex () - 5 years ago - Reply 0