Visual Studio Tooltipster设置
问题描述:
我使用Visual Studio 2015 NuGet Package Manager安装了Tooltipster,关闭并再次打开项目。 正如预期的那样,内容下有一个新的Tooltipster文件夹。 继网上说明我只是把Visual Studio Tooltipster设置
<script>
$(document).ready(function() {
$('.tooltip').tooltipster();
});
在我的Razor视图
和
<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" />
在_Layout.cshtml
比已经存在的其他
(?隐藏)<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版本?引导?我究竟做错了什么?
答
我有ToolTipster在使用从他们的网站下载的版本的Visual Studio ASP.Net MVC应用程序中工作。
因此,作为一个完整性检查,我不能多说NuGet包,但可以确认ToolTipster在ASP.Net MVC 5 Web应用程序中工作。
首先要做的是将图像上的类名从“tooltip”更改为“mytooltip”。 ToolTipster文档指出:
“注意:如果您使用Twitter的Bootstrap,请使用另一个类名称,因为'tooltip'会产生冲突。”
也改变了文档准备的功能匹配:
<script>
$(document).ready(function() {
$('.mytooltip').tooltipster();
});
我使用jQuery 1.11让你的1.12版本应该罚款。
除了上面提到的那些之外,没有Bootstrap引起的问题。
我在您的示例中没有看到的其他内容是对ToolTipster js文件本身的引用。
我有以下
<script src='/Scripts/ToolTipster/tooltipster.bundle.min.js'></script>
我CSHTML布局页头
。您的.js文件的路径将有所不同。因此,也许在浏览器中启动它,然后按F12键加载开发人员工具,查看一下并确保您在那里有一个对tooltipster.bundle.min.js文件的引用。
请确保当您查看页面源代码时,您的图像类具有工具提示,:
class="mytooltip tooltipstered"
这将显示文档加载函数正确地修改您的工具提示类。