web-dev-qa-db-ja.com

入力ボックスにツールチップを追加する

CSS.Tooltipsライブラリを使用して、入力タグに表示されるツールチップを取得しようとしています。 pタグでは機能しますが、inputタグでは機能しません。何か案は？

フィドルへのリンクは次のとおりです。 http://jsfiddle.net/cwlanca/BumU5/1/

html

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p>
</br>
</br>
</br>
<input data-tip="This is the text of the tooltip" value="44"/>

Css

[data-tip] {
    position:relative;

}
[data-tip]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:none;
    content:'';
    display:none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
}
[data-tip]:after {
    display:none;
    content:attr(data-tip);
    position:absolute;
    top:35px;
    left:0px;
    padding:5px 8px;
    background:#1a1a1a;
    color:#fff;
    z-index:9;
    font-size: 0.75em;
    height:18px;
    line-height:18px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    white-space:nowrap;
    Word-wrap:normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
    display:block;
}
html5css3tooltip
39
Lance Collins

これはバグのようで、テキストボックスではないすべての入力タイプ（チェックボックス、ラジオなど）で機能します

機能する簡単な回避策があります。

<div data-tip="This is the text of the tooltip2">
    <input type="text" name="test" value="44"/>
</div>

JsFiddle

36
Justin Lessard

これはCSS.Tooltipsライブラリに関する質問であることを知っています。しかし、私がやったようにグーグル検索「入力ボックスのツールチップ」の結果としてここに来た他の誰かのために、ここに最も簡単な方法があります：

<input title="This is the text of the tooltip" value="44"/>
123
user227353

bootstrap（バージョン4.0を使用しています）を使用している場合は、次のコードを試してみてください。

<input data-toggle="tooltip" data-placement="top" title="This is the text of the tooltip" value="44"/>

data-placementは、上、右、下または左

1
Kushan Randima

HTML 5のデータヒントとは別に、cssを使用して、マークアップ全体のどこでも使用できる完全にカスタマイズ可能なツールチップを作成することもできます。

スタイル

    /* ToolTip CSS classses */ 
.tooltip {
display: inline-block;    
}
.tooltip .tooltiptext {
    margin-left:9px;
    width : 320px;
    visibility: hidden;
    background-color: #FFF;
    border-radius:4px;
    border: 1px solid #aeaeae;
    position: absolute;
    z-index: 1;
    padding: 5px;
    margin-top : -15px; /* according to application */ 
   opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 5%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #aeaeae transparent transparent;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

HTML

<div class="tooltip">Hover Me
      <span class="tooltiptext">
        Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit,
        sed do eiusmod tempor incididunt 
        ut labore et dolore magna aliqua.  </span>
    </div>

コードパン

1
Partha Roy

<input type="text" placeholder="specify">

これにより、入力ボックス内にツールヒントテキストとして「指定」が追加されます。

0
Amit Kharel