1

現在、ツールチップを追加するために Twitter ブートストラップを使用しています。

ここに私のJSがあります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a img").tooltip({'placement': 'right'});
});
</script>

次のようなツールチップの rel 属性を使用して、jquery で画像を追加しようとしています。

$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"/></a>');});

画像がなくてもこれは機能しますが、画像を追加するとすぐに機能しなくなります。

上記の何が問題なのですか？

4

3 に答える 3

4

あなたの構文.appendはオフです。試す：

$(".info").append('<a href="#" rel="tooltip" title="first tooltip"><img src="http://extrarewards.nationalexpress.com/images/assets/info_icon.png"></a>');

デモ: Bootply.com/65857

于 2013-06-27T13:42:57.847 に答える
0

こんにちは、問題が解決したようです。しかし、あなたの問題に対して別の解決策を提供したいと思います。私は個人的にこの方法を使用して、ツールチップ テキストを画像に追加します。

これが私のHTML部分です。

<a href="#" data-toggle="tooltip" title="Your tool tip text here."><img src="imgs/sample.png"></a>

ここにJqueryの部分があります

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

ブートストラップのツールチップについて詳しく知りたい場合は、これを参照してください。

于 2016-02-10T06:04:41.930 に答える