3

HTML：

<input type='text' id='uname' />

JS：

$( "#uname" ).tooltip({ content: "gggg" });

结果：什么都没有。没有工具提示，没有错误；这里有什么问题？

演示：http: //jsfiddle.net/w97FA/

这些是我使用的资源/插件：

4

4 回答 4

5

工具提示作为标题放置：

<input type='text' id='uname' title="gggg" />

http://jsfiddle.net/samliew/w97FA/2/

否则，您必须使用空标题初始化元素，以便动态设置它：

<input type='text' id='uname' title='' />

http://jsfiddle.net/samliew/w97FA/8/

于 2013-04-16T07:39:40.460 回答
4

正如工具提示的API 文档所述，如果您使用“内容”选项，则还需要使用项目选项——因此以下代码有效：

$('#uname').tooltip({ content: "Awesome title!", "items":"input" })

但是，如果您不需要显示内容的特定逻辑或一些复杂的选择，则 title-attribute 的使用可能会更简单。

于 2013-04-16T07:44:26.593 回答
2 
  <script src="js/tooltips.js"></script>
   <script>
       $(function () {
           $("#page-wrap a[title]").tooltips();
       });
   </script>

在 ASP.NET WEB APPLICATION 中使用带有 CSS 的 JQUERY TOOLTIP。这里我们也可以使用 css 来定义工具提示的样式。完整示例 [检查这里][1]

于 2014-09-10T05:14:33.313 回答
0

我知道这篇文章很旧，但我认为这可能会对遇到类似问题的人有所帮助。我一直在浏览一些使用工具提示的旧代码，当您最初将鼠标悬停在指定元素上时它们没有呈现。我尝试了很多不同的解决方案，但无法正确渲染。我终于找到了对我有用的解决方案，即在空白标题属性中简单地添加一个空格。一旦我这样做了，一切都会按预期进行：

//get all elements with classname tooltip
var toolTipElements = document.getElementsByClassName('tooltip');

//initialize tool tips using classname
if(toolTipElements){
  [].forEach.call(toolTipElements, function(element){  
    $(element).tooltip({
      items: 'input',
      show: false,
      hide: false,
      track: true,
    });
    
    //add mouseover event listener to element that is supposed to display tool tip
    element.addEventListener('mouseover', function(){
      renderToolTip(element, true);    
    });
  });  
}

//render tool tip with message
function renderToolTip(element, withTracking){
  $(element).tooltip({
        items: 'input',
        show: false,
        hide: false,
        track: withTracking,
        content: function(callback){
          var toolTipMessage = 'Hello From ' + element.id +' Tool Tip!';          
          callback(toolTipMessage);
        }
    });
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<div>
  <input id="inputElementWithOutSpace" class="tooltip" title=""/>
</div>
<div style='padding-top:12px;'>
  <input id="inputElementWithSpace" class="tooltip" title=" "/>
</div>

于 2019-02-04T22:42:47.657 回答