5

Twitter Bootstrap 3 では、Tooltip を見ると以下のように表示されます。

これはドキュメントに表示されるものです

やってみたところ。ツールチップはこのように表示されます。

ここに画像の説明を入力

これは私が使用したコードです。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
    Tooltip on left
</button>

アップデート

これは私のJSコードです

$('#tooltip1').tooltip('options')
4

3 に答える 3

11

Tooltip on leftを入れて、スクリプトdata-original-title="Tooltip on left"とid="tooltip1"一致させる必要があります。

<button id="tooltip1" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">
    Tooltip on left
</button>

スクリプトが持っていない ID と「オプション」を文字列として参照しているため、機能していませんでした。オプションは空白にするか、「表示」または「非表示」のようにする必要がありますが、あなたの場合は空白で機能します。

変化する：

$('#tooltip1').tooltip('options')

に：

$('#tooltip1').tooltip();

必ずセミコロンを含めてください。

更新： これは簡単な例です

<html lang="en">
    <head>
        <title>
            Bootstrap Tool-Tip preview
        </title>
        <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-md-offset-6">
                    <button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1">
                        Tooltip on left 
                    </button>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
        <script id="bsJs" type="text/javascript">
        $(document).ready(function() {
            $('#tooltip1').tooltip();
        });
        </script> 
    </body>
</html>

例を参照してください: bootply

于 2013-10-14T02:59:00.077 に答える