Visual Studio Tooltipsterセットアップ

Question

Visual Studio 2015 NuGet Package Managerを使用してTooltipsterをインストールし、プロジェクトを閉じて再度開きました。 コンテンツの下に新しいTooltipsterフォルダが追加されました。 以下のオンライン指示私は既に存在しているよりも

と_Layout.cshtmlで

<link rel="stylesheet" type="text/css" href="tooltipster/dist/css/tooltipster.bundle.min.css" /> 
<link rel="stylesheet" type="text/css" href="~/Content/Tooltipster/css/themes/tooltipster-light.css" media="screen" /> 

他の私のかみそりビューで

<script> 
$(document).ready(function() { 
    $('.tooltip').tooltipster(); 
}); 

を入れ

<script src="~/Scripts/jquery-1.12.4.js"></script> 

私はIMG、たとえば、にツールチップを追加すると..画像は、ちょうど（隠された？）消え

<img src="/Content/Images/downarrow.png" class="tooltip" title="This is my image's tooltip message!" /> 

どちらも、それはこのように動作します：たぶん

<span class="fa-lg" title="This is my span's tooltip message!"><a href="#">@Html.FontAwesome(FontAwesomeIconSet.QuestionCircle)</a></span> 

非互換性私のjqueryバージョンで？ブートストラップ？私は間違って何をしていますか？

Answer 1

Webサイトからダウンロードしたバージョンを使用して、Visual Studio ASP.Net MVCアプリケーションでToolTipsterが動作しています。

サニティチェックでは、NuGetパッケージについてはあまり言えませんが、ToolTipsterがASP.Net MVC 5 Webアプリケーションで動作することを確認できます。

まず、画像のクラス名を「ツールチップ」から「mytooltip」に変更します。ツールチップのドキュメントの状態：

"注：Twitterのブートストラップを使用する場合は、「ツールチップ」が競合するため、別のクラス名を使用してください。

も一致する文書レディ機能を変更：

<script> 
$(document).ready(function() { 
    $('.mytooltip').tooltipster(); 
}); 

私はあなたのバージョン1.12は問題ないはずjQueryの1.11を使用しています。

上記のブートストラップ以外の問題は発生しません。

あなたの例で私が見ていない他のものは、ToolTipster jsファイル自体への参照です。

私は私のCSHTMLレイアウトページヘッダーに次の

<script src='/Scripts/ToolTipster/tooltipster.bundle.min.js'></script> 

を持っています。 .jsファイルへのパスは異なります。ブラウザで起動し、F12キーを押して開発者ツールを読み込んで見て、そこにtooltipster.bundle.min.jsファイルへの参照があることを確認してください。

ページソースを表示するとき、イメージクラスにツールチップが表示されていることを確認してください。：

class="mytooltip tooltipstered" 

これは、文書読み込み機能がツールチップクラスを正しく変更していることを示します。