ツールチップの例を試してみる

http://tooltipsy.com/からtooltipsy.min.jsをダウンロードし、それを私のhtmlファイルと同じフォルダに入れました。これはまったく動作しない私のコードです。どうして？ jQueryコードを$(document).ready()で囲むことは役に立ちませんでした。ツールチップの例を試してみる

<html> 
<head> 
<style> 
.tooltipsy { 
    padding: 10px; 
    max-width: 200px; 
    color: #303030; 
    background-color: #f5f5b5; 
    border: 1px solid #deca7e; 
} 
</style> 
<script type="text/javascript" src="jquery-3.1.1.slim.min.js"></script> 
<script type="text/javascript" src="tooltipsy.min.js"></script> 

<script type="text/javascript"> 
$('.hastip').tooltipsy(); 
</script> 

</head> 

<body> 
<a class="hastip" title="I am the tooltip text">I want a tooltip</a> 
</body> 

</html>

出典

2016-10-09 Chris

私の悪いです。私はコードを編集しました。それと同じ結果。 Firebug（@Firefox）はJavaScriptエラーが全くないことを伝えています） – Chris

これは私のために働くようだ：

あなたがヒントを見ることができるあなたの体を押し下げる<p>タグを追加する必要がありました。

HTML：

<html> 
<head> 
<style> 
.tooltipsy { 
    padding: 10px; 
    max-width: 200px; 
    color: #303030; 
    background-color: #f5f5b5; 
    border: 1px solid #deca7e; 
} 
</style> 

<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.hastip').tooltipsy(); 
}) 

</script> 

</head> 

<body> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
<a class="hastip" title="Show me">Why don't you work</a> 
</body> 

</html>

注：ほろ酔いのこのバージョンは、jQueryのの3.xのスリムバージョンとうまく再生されていることは表示されませんので、私は、jQueryの非スリムバージョンを使用。（スリムなjQueryでtipyを使用するとコンソールにエラーUncaught TypeError: b.bind is not a functionがスローされます）

出典

2016-10-09 14:05:12

あなたは正しいです... jquery-3.1.1.min.jsを使用すると動作します。ありがとう。 – Chris

ツールチップの例を試してみる

答えて

関連する問題