Pole tekstowe z info po prawej stronie po kliknięciu na "Nazwa użytkownika".

Question

A da się zrobić, aby po kliknięciu na pole "Nazwa użytkownika" wyskoczyło obok po prawej stronie pole tekstowe z info? Info z tekstem, np. "Twój nick (login, nazwa użytkownika) powinien zawierać minimum 6 znaków i maximum 30 znaków."

<form method="post" action="formularz.php">
	<label for="username">Nazwa użytkownika:</label>
	<input type="text" placeholder="Login" id="username" name="username" class="inpUsername">
</form>

input.inpUsername[type="text"]:focus
{
	margin-bottom: 20px;
	position: relative;
	left: 200px;
	background-color: #FFFF00;
}

 

Answer 1

12 różnych ciekawych: http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
1 ładne, łatwe i proste: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

Comments

Tutaj są przykłady, gdy po najechaniu na dany fragment - wyskakuje pole tekstowe z info.

A mi chodzi, aby po kliknięciu na dany fragment lub pole, wyskoczyło mi pole tekstowe z info.

---

http://community.sitepoint.com/t/tooltip-onclick/30711/3 Wydajce mi się, że tu możesz znaleźć odpowiedź. Jeśli nie, to Google naprawdę nie boli - sam poszukaj

Answer 2

To się nazywa tooltip. Poszukaj np na stronie bootstrapa.

Comments

Chciałbym, aby po kliknięciu na pole "Nazwa użytkownika" wyskoczyło obok po prawej stronie pole tekstowe z info z tekstem, np. "Twój nick (login, nazwa użytkownika) powinien zawierać minimum 6 znaków i maximum 30 znaków." Gdzieś jest drobny błąd,bo nadal nie wyskakuje chmurka.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div id="content">
    <form method="post" action="formularz.php">
        <label for="username">Nazwa użytkownika:</label>
        <input type="text" placeholder="Login" id="username" name="username" class="inpUsername" class="ramka" data-toggle="tooltip" data-original-title="Twój nick (login, nazwa użytkownika) powinien zawierać..." data-trigger="focus" data-placement="right">
    </form>
</div>

input.inpUsername[type="text"]:focus
{
    margin-bottom: 20px;
    position: relative;
    left: 200px;
    background-color: #FFFF00;
}
 
#username
{
    display: block;
    width: 300px;
    padding: 4px;
    margin-bottom: 20px;
    position: relative;
    left: 200px;
}
 
.ramka
{
    display: none;
    width: 325px;
    height: 130px;
    white-space: pre;
    border-radius: 10px;
    background-color: #000000;
    font-size: 11px;
    position: absolute;
    z-index: 9999;
    left: 105%;
}

<script>
    $(function(){
        $("(data-toggle='tooltip')").tooltip({animation: true});
    })
</script>