Visual Studio工具提示设置

Question

I installed Tooltipster using Visual Studio 2015 NuGet Package Manager, closed and opened the project again. As expected now there's a new Tooltipster folder under Content. Following online instructions I just put a

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

in my razor view

and

<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" />

in _Layout.cshtml

other than already present

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

When I add a tooltip to, say, an img, .. the image just disappear (hidden?)

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

Neither it works this way:

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

Maybe an incompatibility with my jquery version? Bootstrap? What am I doing wrong?

Answer 1

I've got ToolTipster working in a Visual Studio ASP.Net MVC application using the version downloaded from their website.

So as a sanity check I can't say much about the NuGet package, but can confirm that ToolTipster works in an ASP.Net MVC 5 web application.

First thing to do is to change the class name on your image from "tooltip" to something else ie "mytooltip". The ToolTipster documentation states:

"Note: if you use Twitter's Bootstrap, use another class name because 'tooltip' will create a conflict."

Also change the document ready function to match:

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

I'm using jQuery 1.11 so your version 1.12 should be fine.

No issues caused by Bootstrap other than those mentioned above.

The other thing I don't see in your example is a reference to the ToolTipster js file itself.

I have the following

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

in my cshtml layout page header. Your path to the .js file will differ. So perhaps fire it up in a browser and hit the F12 key to load the developer tools, have a look and make sure you have a reference to the tooltipster.bundle.min.js file there.

Make sure that when you view the page source, your image class has tooltipstered added after it ie:

class="mytooltip tooltipstered"

This will show that the document load function is correctly modifying your tooltip classes.