htmlフォーム入力の2番目のbackgroud URLにツールチップを追加

私は数日間これを抱いていました。バックグラウンドURLにツールチップを追加する方法が分かりません。バックグラウンドで2つの画像、最も左側にヘルプアイコンがあります。私は、右にあるtooltip.pngアイコンにマウスのホバー上のツールチップまたはタイトルを追加することを楽しみにしています。誰でもこれを実装するより良い方法を提案することができます。次htmlフォーム入力の2番目のbackgroud URLにツールチップを追加

は、任意のヘルプははるかに高く評価されているコード

input[type=text], input[type=p] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    background-color: #FFFFFF; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
    padding-left: 46px; 
 
} 
 
input[type=text] { 
 
    background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat, url('http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png') right 10px center no-repeat; 
 
    background-size: 24px 24px, 15px, 15px; 
 
    background-color: #FFFFFF; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Log In</title> 
 
</head> 
 
<body> 
 
     <form id="loginform" onsubmit="return false;"> 
 
      <input type="text" id="email" placeholder="Username or Email" padding="10px"> 
 
     </form> 
 
</body> 
 
</html>

です。ここ

出典

2016-09-15 Ozzie Ghani

私は答えはそれに見て追加しました。 – Gowtham

input[type=text], input[type=p] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    background-color: #FFFFFF; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
    padding-left: 46px; 
 
    z-index:-1; 
 
} 
 
input[type=text] { 
 
    background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat; 
 
    background-size: 24px 24px, 15px, 15px; 
 
    background-color: #FFFFFF; 
 
} 
 
img{ 
 
    position:absolute; 
 
    right:15px; 
 
    top:20px; 
 
} 
 
#username{ 
 
position:relative; 
 
} 
 
.tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    right:15px; 
 
    z-index: 1; 
 
} 
 

 
img:hover + .tooltiptext { 
 
    visibility: visible; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Log In</title> 
 
</head> 
 
<body> 
 
    
 
     <form id="loginform" onsubmit="return false;"> 
 
      <div id="username"> 
 
      <img src="http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png" width=20px; height=20px;> 
 
      <span class="tooltiptext">You have to enter username</span> 
 
      <input type="text" id="email" placeholder="Username or Email" padding="10px"> 
 
      </div> 
 
     </form> 
 
    
 
</body> 
 
</html>

出典

2016-09-15 04:08:36 Gowtham

ありがとう、魅力的に働いた –

は、これであなたを助けるかもしれないリンクでお願いします。

http://www.w3schools.com/css/css_tooltip.asp

出典

2016-09-15 03:52:49 Brian

htmlフォーム入力の2番目のbackgroud URLにツールチップを追加

答えて

関連する問題