web-dev-qa-db-ja.com

HTMLツールチップ（タイトル属性）をフォーマットすることは可能ですか？

HTMLツールチップをフォーマットすることは可能ですか？

例えば。属性title = "foo！"を持つDIVがあります。ブラウザのテキストサイズをズームインまたはズームアウトしても、ツールチップのテキストサイズは変更されません。ブラウザの設定でツールヒントのフォントを拡大する方法はありますか？

htmltooltip
75
sunflowerpower

いいえ。ただし、 Overlib や jQuery など、この自由を可能にする他のオプションがあります。

個人的には、jQueryを使用するルートとして推奨します。通常、非常に目立たず、サイトのマークアップに追加のセットアップは必要ありません（jheadスクリプトタグを<head>に追加することを除く）。

43
Sampson

CRには&#013;、LFには&#010;、TABには&#009;などのエンティティコードを使用してみてください。

例えば：

<div title="1)&#009;A&#013;&#010;2)&#009;B">Hover Me</div>
64
Louis

あなたはそれを行うためにcssとトリック（javascriptなし）を使用できるようです：

http://davidwalsh.name/css-tooltips

http://www.menucool.com/tooltip/css-tooltip

http://sixrevisions.com/css/css-only-tooltips/

http://csstooltip.com

16
matteo galiazzo

彼らは常に言うよりも遅くなることはない。

通常、jQueryを使用してこのような状況を解決します。しかし、javascriptなしのソリューションを必要とするクライアントのサイトで作業するとき、私は次のことを思いつきました。

<div class="hover-container">
    <div class="hover-content">
        <p>Content with<br />
        normal formatting</p>
    </div>
</div>

次のcssを使用すると、タイトルと同じ状況になります。

.hover-container {
    position: relative;
}

.hover-content {
    position: absolute;
    bottom: -10px;
    right: 10px;
    display: none;
}

.hover-container:hover .hover-content {
    display: block;
}

これにより、必要に応じてスタイルを設定するオプションも提供され、すべてのブラウザで機能します。 JavaScriptが無効になっているものでも。

長所：

  • スタイリングに多くの影響を与えています
  • （ほぼ）すべてのブラウザーで動作します

短所：

  • ツールチップを配置するのが難しい
3
Sander Koedood

いいえ、不可能です。ブラウザにはツールチップを実装する独自の方法があります。できることは、Javascriptを使用してHTMLツールチップのように動作するdivを作成するだけです（ほとんどの場合、単に「ホバーで表示」です）。

これにより、ツールチップdiv内のテキストは実際のHTMLであるため、ブラウザーのズームインまたはズームアウトについて心配する必要はありません。

良いリソースについては、ジョナサンの post をご覧ください。

2
andyk

不可能です。ただし、いくつかのJavaScriptライブラリを使用して、このようなツールチップを作成できます。 http://www.taggify.net/

2
Anton

すべてのネイティブタイトルツールチップを定型化されたノードに変換するこの小さなJavaScript関数を作成しました： http://jsfiddle.net/BurakUeda/g8r8L4vt/1/

mo_title = null;
mo_element = null;

document.onmousemove = function (e) {
        var event = e || window.event;
        var current_title;
        var moposx = e.pageX;  // current 
        var moposy = e.pageY;  // mouse positions

        var tooltips = document.getElementById("tooltips");  // element for displaying stylized tooltips (div, span etc.)

        var current_element = event.target || event.srcElement;  // the element we're currently hovering
        if (current_element == mo_element) return;  // we're still hovering the same element, so ignore
        if(current_element.title){
                current_title = current_element.title;  
        } else {
                current_title = "-_-_-";         // if current element has no title, 
                current_element.title = "-_-_-"; // set it to some odd string that you will never use for a title
        }
        if(mo_element == null){   // this is our first element  
                mo_element = current_element;
                mo_title = current_title;
        }
        if(mo_title) mo_element.title = mo_title;   // restore the title of the previous element

        mo_element = current_element;  // set current values
        mo_title = current_title;      // as default

        if(mo_element.title){
                var mo_current_title = mo_element.title;  // save the element title
                mo_element.title = "";  // set it to none so it won't show over our stylized tooltip
                if(mo_current_title == "-_-_-"){   //  if the title is fake, don't display it
                        tooltips.style.display = "none";
                        tooltips.style.left = "0px";
                        tooltips.style.left = "0px";
                        tooltips.innerHTML = "";
                } else { 
                        tooltips.style.display = "inline-block";
                        tooltips.style.left = (moposx + 10) + "px";
                        tooltips.style.top = (moposy + 10) + "px";
                        tooltips.innerHTML = mo_current_title;
                }
        }
};
#tooltips {
    display: none;
    position: absolute;
    left 0;
    top: 0;
    color: white;
    background-color: darkorange;
    box-shadow: black 2px 2px 2px;
    padding: 5px;
    border-radius:5px;
}

#buttoncontainer{
    border: 1px black solid;
    padding: 10px;
    margin: 5px;
}
<div id="tooltips"></div>
<div>
    <div title="DIV #1">Division 1</div>
    <div id="buttoncontainer" title="Button container">
        <button title="Button with title"> Button #1 </button>
        <button> Button w/o title </button>
        <button title="
            <table border='1' cellpadding='4' cellspacing='0'>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #1</td>
                    <td style='text-decoration:underline; color:RoyalBlue; font-style: italic; font-size: 18px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #2</td>
                    <td style='text-decoration:overline; color:RoyalBlue; font-weight:bold; font-size: 14px'>Description 1</td>
                </tr>
                <tr>
                    <td style='background-color:black; color:white; font-weight:bold; text-align: right'> TITLE #3</td>
                    <td style='text-decoration:line-through; color:RoyalBlue; font-style: italic; font-size: 12px'>Description 1</td>
                </tr>
            </table>
        "> Button title containing HTML </button>
    </div>
</div

長所：

  • 何も変換する必要はありません。ネイティブのタイトル属性を使用して通常のHTMLを記述するだけです。
  • タイトルツールチップでHTMLタグとインラインスタイリングを使用できます。 （タイトルにHTMLテーブル全体があり、独自のスタイルが設定されている例を参照してください）

短所：

  • それはjavascriptです
  • 存在するすべてのブラウザでテストされているわけではありませんが、最新バージョンのChrome、FF、IEおよびOpera

おそらくもっとエレガントに書くことができ、不要な行がいくつかあるかもしれません。

また、stackoverflowコードスニペットはHTMLコードを正しく解析できないため、私が提供したjsfiddleリンクで確認してください。

1
BurakUeda

Mootools には、 'more builder'で利用できるNice 'Tips'クラスもあります。

1
tj111

すべてのブラウザまたはサードパーティのツールで動作するかどうかはわかりませんが、改行のツールチップで「\ n」を指定するだけで成功しました。少なくともIE11、Firefox、およびChromeでdhtmlxを使用します

for (var key in oPendingData) {
    var obj = oPendingData[key];
    this.cells(sRowID, nColInd).cell.title += "\n" + obj["ChangeUser"] + ": " + obj[sCol];
}
1
aggaton

これは古い投稿であることは知っていますが、今後の参考のために回答を追加したいと思います。 jQueryとcssを使用してツールチップのスタイルを設定します：最も簡単なツールチップと画像プレビューと使用するjquery（デモ： http://cssglobe.com/lab/tooltip/02/ ）静的なWebサイトでは、これはうまくいきました。ただし、Wordpress=への移行中に停止しました。私の解決策は、<br> and <span>のようなタグを&lt;br&gt; and &lt;span&gt;に変更することでした。

0
Jurgen