Question

HTML：

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

JS：

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

结果：没有。没有工具提示，没有错误;这有什么不对？

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

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

Answer 1

工具提示作为标题：

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

Answer 2

正如工具提示的API documentation所述，如果您使用“内容”选项，则还需要使用items-option - 以便以下代码有效：

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

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

Answer 3

  <script src="js/tooltips.js"></script>
   <script>
       $(function () {
           $("#page-wrap a[title]").tooltips();
       });
   </script>

在ASP.NET WEB APPLICATION中使用CSS JQUERY TOOLTIP。我们也可以使用css来定义tooltip的样式。完整示例[查看此处] [1]

Answer 4

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

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

使用JQueryUI初始化工具提示

4 个答案: