divにツールチップを追加する

568

私はこのようなdivタグを持っています：

<div>
  <label>Name</label>
  <input type="text"/>
</div>

:hoverdivのツールチップを、できればフェードイン/フェードアウト効果で表示するにはどうすればよいですか。

javascript  html  css  tooltip 
— ユーザー475685
ソース
2
単純なCSS + JavaScriptソリューションの場合、stackoverflow.com
— Rick Hitchcock
1
— Andrea Ligios 2014年
— プージャケダル

回答:

896

基本的なツールチップとして、次のものが必要です。

<div title="This is my tooltip">

より洗練されたJavaScriptバージョンの場合、次の内容を確認できます。

https://jqueryhouse.com/best-jquery-tooltip-plugins/

上記のリンクには、ツールチップの25のオプションがあります。

— scirrus
ソース
2
タイトルツールヒントで注意すべき点の1つは、ユーザーがdivをクリックした場合、ツールヒントが表示されないことです。これは非常にイライラすることがあります... divがクリックされるべきであるように見える場合は特にです。例：style = "cursor：pointer;"
— RayLoveless 2014年
2
@RayLツールチップがクリック可能になるのは標準的な動作ではありません。これにより、リンクとツールチップがぼやけ、ハイライトされた単語が1）より多くの情報を提供するのか、2）完全に別のページに移動するのかをユーザーが知ることができなくなります。一般的に、悪い習慣。
— sscirrus
@sscirrus同意する。そのため、「カーソル：ポインタ」を使用してツールチップのスタイルを設定しないでください。（クリックを促す）頻繁に見ます。
— RayLoveless 2014
18
キーワードの「詳細」などのテキストの一部についてのみツールチップを表示したい場合は、<abbr title="...">...</abbr>代わりに使用します。ブラウザは通常、この下線にダッシュ/ドットを使用してスタイルを設定します。
— リーム2014
2
Chromeでは、ツールチップが表示されるまで数秒かかる場合があります。私の意見ではちょっと遅いです。
— AndroidDev 2017年
292

それは行うことができますCSSのみで、無javascriptのすべてで：実行中のデモを

  1. たとえば、カスタムHTML属性を適用します。data-tooltip="bla bla"あなたのオブジェクト（divまたは何でも）：

    <div data-tooltip="bla bla">
    something here
</div>

  2. :before各[data-tooltip]オブジェクトの疑似要素を透明、絶対配置、data-tooltip=""コンテンツとしての値で定義します。

    [data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

  3. :hover:beforeそれぞれのホバリング状態を定義[data-tooltip]して、それを表示します。

    [data-tooltip]:hover:before {        
    opacity : 1;
}

  4. ツールチップオブジェクトにスタイル（色、サイズ、位置など）を適用します。物語の終わり。

デモでは、別のカスタム属性data-tooltip-persistent、および単純なルールを使用して、ツールチップを親の外に置いたときにツールチップを非表示にする必要があるかどうかを指定する別のルールを定義しました。

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

注1：これのブラウザカバレッジは非常に広いですが、古いIEで（必要な場合）JavaScriptフォールバックの使用を検討してください。

注2：機能強化は、適用されるクラスを変更することにより、マウスの位置を計算して疑似要素に追加するために、JavaScriptを少し追加することです。

— アンドレア・リギオス
ソース
1
@AndreaLigiosこれを変更して、ツールチップが表示されていないときにツールチップが1x1pxにスケーリングされ、そのピクセルがテキストの0,0座標のどこかにあるようにできますか？現在、デモに問題があります。デモの3番目のdivの下の領域にマウスを置くと、ツールチップが表示され始めますが、その後マウスポインターから離れて、開始位置に戻ります。再び登場をだます。それは非常に速く起こっており、ちらつきを示しています。
— ジョン
1
素晴らしい答えAndrea、受け入れられた答えは時代遅れです。jsfiddleは多くのことを助けてくれました。
— jhhoff02
2
この質問には2つの素晴らしい答えがあるのが大好きです。1つはシンプルで、もう1つはカスタマイズ可能です。
— Rohmer 2017年
2
これはすごい！しかし、どのようにここに改行を追加できますか？無視しているようだ<br>し、他の人が好き\nか、\rこれらのように単なる文字列の残りの部分でプレーンテキストとして表示されます。更新：最大幅を設定すると、コンテンツが自動的に調整され、改行が挿入されることに気づきました。本当にすっきり！（しかし、誰かが答えを知っていれば、私はそれを感謝します）
— LinusGeffarth 2017年
2
@LinusGeffarthあなたは空白でそれを行うことができます：pre-wrap; 現在のChromeで。ただし、他のブラウザはテストしていません。
— Taugenichts
83

これにはJavaScriptはまったく必要ありません。title属性を設定するだけです：

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>

ツールチップの視覚的表示はブラウザ/ OSに依存しているため、フェードインする場合としない場合があることに注意してください。ただし、これはツールチップを実行するセマンティックな方法であり、スクリーンリーダーなどのアクセシビリティソフトウェアで正しく動作します。

スタックスニペットのデモ

<div title="Hello, World!">
  <label>Name</label>
  <input type="text"/>
</div>
スニペットを展開

— cdhowie
ソース
true、ただしOPがツールチップのスタイルを設定したい場合は、CSS実装の方が適切です
— Yvonne Aburrow 2017年
2
@YvonneAburrowこの回答はOPだけのものではありません。
— cdhowie
けっこうだ。しかし、時にはツールチップにエッセイを書く必要があり、その状況ではtitle属性はそれを切り取らないだけです。
— Yvonne Aburrow 2017年
@YvonneAburrow ...そのため、複数の賛成投票があります。シンプルで迅速なものが必要な場合はtitle機能します。もっと複雑なものが必要な場合は、もっと複雑な他の答えがあります。正直なところ、あなたがここで何をしようとしているのかわかりません。
— cdhowie
17

ここにjQueryの便利なツールチップがあります：

https://jqueryui.com/tooltip/

これを実装するには、次の手順に従ってください。

  1. このコードを<head></head>タグに追加します。

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
<script type="text/javascript">
$("[title]").tooltip();
</script> 
<style type="text/css"> 

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
    display:none;
    background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#fff;
}
</style>

  2. ツールチップを表示するHTML要素に、title属性を追加するだけです。タイトル属性にあるテキストはすべてツールチップに表示されます。

注： JavaScriptを無効にすると、デフォルトのブラウザー/オペレーティングシステムのツールチップにフォールバックします。

— ネイサン
ソース
16

私もdivに適応できるようなことをしました。

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

より詳細な議論については、私の投稿を参照してください：

ホバー時の簡単なフォーマット済みツールヒントテキスト

— ナルニア人
ソース
8
質問は、.netサーバー側の魔法ではなく、htmlソリューションに対するものでした。
— のMichałŠrajer
5
.netコードは切り捨てを示すためにあります。htmlとcssを使用するアプローチはまだ有効です。
— Mark Swardstrom 2013
1
これはJSに依存しないため、最も簡単で最適なソリューションです。span.showonhoverをフォーカス可能にするか、span.hovertextをリンクに移動するだけで、スクリーンリーダーから完全にアクセスできます（そのため、title属性ソリューションよりも優れています）。ああ、<％＃...％>を忘れてください
— chaenu
15

これは純粋なCSS 3実装です（オプションのJSを使用）

あなたがしなければならない唯一のことは、 "data-tooltip"と呼ばれる任意のdivに属性を設定することです。そのテキストの上にカーソルを置くと、そのテキストがその隣に表示されます。

ツールチップをカーソルの近くに表示するオプションのJavaScriptをいくつか含めました。この機能が必要ない場合は、このフィドルのJavaScript部分を無視しても問題ありません。

ホバー状態のフェードインが不要な場合は、遷移プロパティを削除します。

titleプロパティのツールチップのようなスタイルです。ここにJSFiddleがあります：http ://jsfiddle.net/toe0hcyn/1/

HTMLの例：

<div data-tooltip="your tooltip message"></div>

CSS：

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

マウス位置ベースのツールチップの場所を変更するためのオプションのJavaScript：

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}
— スティーブン・リン
ソース
12

さて、ここにあなたの賞金要件がすべて満たされています：

  • jQueryなし
  • すぐに現れる
  • マウスが領域を離れるまで消えない
  • フェードイン/アウト効果を組み込んだ
  • そして最後に..簡単な解決策

ここにデモと私のコードへのリンクがあります（JSFiddle）

これが、この純粋なJS、CSS、およびHTML5フィドルに組み込んだ機能です。

  • フェードの速さを設定できます。
  • ツールチップのテキストを簡単な変数で設定できます。

HTML：

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS：

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript：

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);
— 安州ドゥブハシ
ソース
カーソルをすばやく移動すると、jsfiddleで消えない複数のツールチップが生成されます。
— Ke Vin
ツールチップがマウスの位置に表示されるのでしょうか。素晴らしいカスタマイズ。
— Andre Mesquita、2015
5

データ属性、疑似要素などを使用して、カスタムCSSツールチップを作成できますcontent: attr()。

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

。 

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
— クリント・ブラウン
ソース
4

最も簡単な方法は、コンテナー内のコンテナーposition: relative要素とposition: absoluteツールチップ要素に設定して、コンテナーを親（コンテナー要素）に対して浮動させることです。例えば：

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>
— デザイン
ソース
4

タイトルを使用できます。それはほとんどすべてのために働くでしょう

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

HTMLウィンドウに表示できるタグを考えて、そのタグのtitle="whatever tooltip you'd like"内部に挿入すると、ツールチップが表示されます。

— ロニー・マシューズ
ソース
どうして票数が少ないのか分かりません。私は簡単な解決策があると確信していましたが、人々とw3schoolsはそのような簡単なことのための複雑な解決策を考え出しました。ありがとうございました。
— シュリンゲル
4

あなたは時の子のdivを切り替えることができますonmouseoverし、onmouseoutこのように：

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

スタックスニペットとjsFiddleの例

コードスニペットを表示

— ProllyGeek
ソース
3 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

ツールチップスタイルをカスタマイズすることもできます。このリンクを参照してください：http : //jqueryui.com/tooltip/#custom-style

— サンマン
ソース
3

CSS3のみのソリューションは次のようになります。

CSS3： 

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5：

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

その後tooltip-2、同じ方法でdiv を作成できます。もちろん、title属性の代わりにdata属性を使用することもできます。

— デザイン
ソース
1
IDを使用して、インスタンスを追加したいものにスタイルを設定し[id^=tooltip]、クラスを使用しただけでセレクターを使用するのは.tooltipなぜですか？
— Stephan Muller
あなたが正しい。私はIDから始めたので、それに続いて完全に見逃しました。しかし、ねえ、誰かがそれから利益を得るかもしれません。ああ、道で、私たちも、例えば（「データ・タイトル」を選択し、そのことについては属性セレクタを使用することができ div[data-title])、余分なマークアップを追加することなく。
— designcise
3

これを試して。あなたはCSSだけでそれを行うことができ、私はdata-titleツールチップの属性を追加しただけです。

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}
<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>
スニペットを展開

— アンキタパテル
ソース
3

私は3つのタイプのフェード効果を開発しました：

/* setup tooltips */
    .tooltip {
      position: relative;
    }
    .tooltip:before,
    .tooltip:after {
      display: block;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }
    .tooltip:after {
    	border-right: 6px solid transparent;
    	border-bottom: 6px solid rgba(0,0,0,.75); 
      border-left: 6px solid transparent;
      content: '';
      height: 0;
        top: 20px;
        left: 20px;
      width: 0;
    }
    .tooltip:before {
      background: rgba(0,0,0,.75);
      border-radius: 2px;
      color: #fff;
      content: attr(data-title);
      font-size: 14px;
      padding: 6px 10px;
        top: 26px;
      white-space: nowrap;
    }

    /* the animations */
    /* fade */
    .tooltip.fade:after,
    .tooltip.fade:before {
      transform: translate3d(0,-10px,0);
      transition: all .15s ease-in-out;
    }
    .tooltip.fade:hover:after,
    .tooltip.fade:hover:before {
      opacity: 1;
      transform: translate3d(0,0,0);
    }

    /* expand */
    .tooltip.expand:before {
      transform: scale3d(.2,.2,1);
      transition: all .2s ease-in-out;
    }
    .tooltip.expand:after {
      transform: translate3d(0,6px,0);
      transition: all .1s ease-in-out;
    }
    .tooltip.expand:hover:before,
    .tooltip.expand:hover:after {
      opacity: 1;
      transform: scale3d(1,1,1);
    }
    .tooltip.expand:hover:after {
      transition: all .2s .1s ease-in-out;
    }

    /* swing */
    .tooltip.swing:before,
    .tooltip.swing:after {
      transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
      transform-origin: 0 0;
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:after {
      transform: translate3d(0,60px,0);
      transition: transform .15s ease-in-out, opacity .2s;
    }
    .tooltip.swing:hover:before,
    .tooltip.swing:hover:after {
      opacity: 1;
      transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
    }

    /* basic styling: has nothing to do with tooltips: */
    h1 {
      padding-left: 50px;
    }
    ul {
      margin-bottom: 40px;
    }
    li {
      cursor: pointer; 
      display: inline-block; 
      padding: 0 10px;
    }
 <h1>FADE</h1>

      <div class="tooltip fade" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>EXPAND</h1>

      <div class="tooltip expand" data-title="Hypertext Markup Language">
      <label>Name</label>
      <input type="text"/>
      </div>
      

    <h1>SWING</h1>

      <div class="tooltip swing" data-title="Hypertext Markup Language"> 
      <label>Name</label>
      <input type="text"/>
      </div>
スニペットを展開

— ニムスパテル
ソース
3

以下は、マウスの位置とウィンドウの高さと幅を考慮に入れる簡単なツールチップの実装です。

function showTooltip(e) {
  var tooltip = e.target.classList.contains("tooltip")
      ? e.target
      : e.target.querySelector(":scope .tooltip");
  tooltip.style.left =
      (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth)
          ? (e.pageX + 10 + "px")
          : (document.body.clientWidth + 5 - tooltip.clientWidth + "px");
  tooltip.style.top =
      (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight)
          ? (e.pageY + 10 + "px")
          : (document.body.clientHeight + 5 - tooltip.clientHeight + "px");
}

var tooltips = document.querySelectorAll('.couponcode');
for(var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mousemove', showTooltip);
}
.couponcode {
    color: red;
    cursor: pointer;
}

.couponcode:hover .tooltip {
    display: block;
}

.tooltip {
    position: absolute;
    white-space: nowrap;
    display: none;
    background: #ffffcc;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
    color: black;
}
Lorem ipsum dolor sit amet, <span class="couponcode">consectetur
adipiscing<span class="tooltip">This is a tooltip</span></span>
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span
class="couponcode">reprehenderit<span class="tooltip">This is
another tooltip</span></span> in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est <span
class="couponcode">laborum<span class="tooltip">This is yet
another tooltip</span></span>.
スニペットを展開

（このフィドルも参照してください）

— ジョン・スレガーズ
ソース
2

APIを使用せずに、 純粋なCSSとJquery Demoを使用して、このようなこともできます

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});
— アミン・コダガヌール
ソース
2

純粋なCSSを使用してツールチップを作成できます。これを試してください。問題の解決に役立つことを願っています。

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
— ファイサル
ソース
2

ツールチップの配置純粋なCSS

      div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
							
        text-align: center;
      }  					
	
      .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        //text-align: center;
        border-radius: 6px;
        padding: 5px 0;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }		
					
      .toolLeft {
        top: -5px;
        right: 105%;
      }					
					
      .toolRight {
        top: -5px;
        left: 105%;
      }
					
      .toolTop {
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
      }
					
      .toolBottom {
        top: 100%;
        left: 50%;
        margin-left: -60px;
      }
    <div>
			
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />			
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />			
			
    </div>
スニペットを展開

— アンテラブ
ソース
2

あなたは簡単なCSSでそれを行うことができます... jsfiddleここでは例を見ることができます

ツールチップのcssコードの下

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
— サティヤット・ルート
ソース
1

この質問にはたくさんの答えがありますが、それでも誰かを助けるかもしれません。左、右、上、下のすべての位置に対応しています。

ここにCSSがあります：

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

そして、HTMLタグは次のようになります。

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title="">Text Here</p>

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title="">Text Here</p>

— MJ
ソース
1

ブートストラップツールチップを試すことができます。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ここでさらに読む

— 100万
ソース
1

これをツールチップとして使用することもできます...同じように機能しますが、追加のタグを作成する必要があります。

<abbr title="THis is tooltip"></abbr>
1

そして私のバージョン

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

次に、HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>
— オルボドゥンアグバラヤ
ソース
1

Azleは素晴らしい実装をしています。私の言ってターゲット要素はクラス名「my_icon」で、アイコンです。Azleの add_tooltip関数を使用して要素をターゲットに設定するだけです。

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!"
})

ここに画像の説明を入力してください

通常のCSSスタイルを使用して、ツールチップの位置とスタイルを制御できます。上記のツールチップのスタイルは次のとおりです。

az.style_tooltip('my_tooltip', 1, {
    "background" : "black",
    "margin-left" : "10px",
    "color" : "hotpink",
    "font-weight" : "bold",
    "font-family" : "Arial",
    "padding" : "10px",
    "border-radius" : "10px"
})

「image_path」を指定して、ツールチップに画像を追加することもできます。

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "HELLO THERE!",
    "image_path" : "https://cdn-images-1.medium.com/max/1874/1*toepgVwopga9TYFpSkSxXw.png",
    "image_class" : "my_image"
})

ここに画像の説明を入力してください

上記で「image_class」を指定したので、今度は画像をターゲットにして、同じstyle_tooltip関数を使用して画像のスタイルを設定できます。上記のゲーム画像は次のようにスタイル設定されています。

az.style_tooltip('my_image', 1, {
    "width" : "50px",
    "align" : "center"
})

次に、大きな画像を使用した例を示します。

ここに画像の説明を入力してください

...次のように追加およびスタイル設定されます。

az.add_tooltip('my_icon', 1, {
    "this_class" : "my_tooltip",
    "text" : "MORE INFO<br><br>",
    "image_path" : "https://i0.wp.com/proactive.ie/wp-content/uploads/2017/11/Infographic.jpg?resize=1240%2C1062&ssl=1",
    "image_class" : "my_image"
})

az.style_tooltip('my_image', 1, {
    "width" : "500px"
})

これがコード全体のGISTです。

このFIDDLEで遊ぶことができます。

— サイバネティック
ソース
0

divにツールチップを追加する

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>
— ラブクマー
ソース
— Mark Kortink
-1 
<div title="tooltip text..">
    Your Text....
</div>

div要素にツールチップを追加する最も簡単な方法。

— カルティックアローラ
ソース
3
申し訳ありません、Kartik、同じことが複数の回答とコメントで述べられました。あなたの寄付は何も追加しません:(
— brasofilo 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.