3

HTMLページにjQueryツールチップを作成しました。ハイパーリンク上に HTML コンテンツを含むツールチップを表示したいと考えています。しかし、jQuery ツールチップは、すべての html テキストをツールチップ内の通常のテキストとして表示するだけで、html 形式はありません。jQuery Tooltip の例があります。

<head>
    <title>jQuery Tooltip</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

    <script>
        $(function() {
            $(document).tooltip();
        });
    </script>
    <style>
        label {
            display: inline-block;
            width: 5em;
        }
    </style>
</head>
<body>
    <a href="#" title="<font color='#FF0000'>That's what this widgets</font>">Tooltips</a>
</body>

ツールチップには、「これがこのウィジェットです」というテキストが赤色で表示される代わりに、 「<font color='#FF0000'>That's what this widgets</font>」が表示されます。html 形式はツールチップ テキストには適用されません。ツールチップが html 形式を認識していないようです。問題は、ツールチップのスタイルが正しくないか、jQuery ツールチップが html コンテンツをサポートしていない可能性があるようです。

jQuery ツールチップで html コンテンツを表示できない理由を知りたいですか? 私の問題について助けが必要です。

4

2 に答える 2

1

css で色を設定することをお勧めします。

Javascript コード:

$(function () {
    $(document).tooltip({ tooltipClass: "custom-tooltip-styling" });
});

CSS:

.custom-tooltip-styling { color: #ff0000; }

デモ: http://jsfiddle.net/netme/3Ckk3/2/

于 2013-04-02T13:35:49.563 に答える