2

ブートストラップのドキュメントを示すようにツールチップ メッセージを黒色のボックスに表示したいのですが、デフォルトのツールチップ テキストが表示されます。誰かが私が間違っていることを提案できますか?

<html><head>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>

<script>

   $("#a").tooltip();

</script>
</head>

<body>
<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</body>

</html>

誰かが私の問題の解決策で本当のコンセプトを教えてくれたら本当に感謝しています. 何をしたらいいでしょう？プランカーデモ

ありがとうございました。

4

3 に答える 3

0

jqueryと必要なブートストラップ JavaScript ファイルが含まれていないようです。

スタイルシートと JavaScript の配置も重要です。ブートストラップ JavaScript ファイルとブートストラップ スタイルシート ファイルを、他のスタイルシートと JavaScript ファイルの最後に配置するようにしてください。

注意: id は一意です! classまたはdata-toggleをセレクターとして使用するのが賢明です。

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script.js"></script>



<h1>Hello Plunker!</h1>
<button id="a" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

于 2015-08-20T11:29:15.253 に答える
0

このコードを使用すると、これが役立つと思います..

HTML:

<button class="btn right" title="" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip on right">Tooltip on right</button>

Javascript:

$('button').tooltip();

外部リソースは次のとおりです。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
于 2015-08-20T10:54:46.783 に答える
0

書く代わりに

<script>

   $("#a").tooltip();

</script>

スクリプトをこれに置き換えます

<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

ここにフィドルがあります

于 2015-08-20T10:55:45.343 に答える