标签: tooltip

我正在使用D3绘制散点图.当用户将鼠标悬停在每个圆圈上时,我想显示工具提示.

我的问题是,我可以追加提示,但他们使用的鼠标事件定位成d3.event.pageX和d3.event.pageY,所以他们不会在每个圆圈一贯定位.

相反,有些位于圆圈的左侧,有些位于右侧 - 这取决于用户的鼠标进入圆圈的方式.

这是我的代码:

circles
  .on("mouseover", function(d) {         
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });

并且是一个JSFiddle显示问题:http://jsfiddle.net/WLYUY/5/

有什么方法可以使用圆心的中心作为定位工具提示的位置,而不是鼠标位置？

我有一个链接,我将用作通知,当用户有一些新的通知我将通过显示工具提示(twitter bootstrap工具提示)通知用户.我想要实现的是,工具提示应该保持可见,直到用户点击链接.一旦用户点击链接,工具提示就应该销毁.这就是我现在所拥有的,http://jsfiddle.net/testtracker/QsYPv/

HTML

<p><a href="#" rel="tooltip" data-original-title="you have 2 notifications">Notification</a>.</p>?

JavaScript的

$('p a').tooltip({placement: 'bottom'}).tooltip('show');?

发生什么事情,工具提示保持可见,直到你将其悬停,并在你悬停它时采取默认行为(在悬停时显示).

我希望我已经提供了适当的信息,并清除了我想做的事情.

工具提示是当鼠标在窗口小部件上悬停一段时间时弹出的那些小文本.

如何向tkinterPython应用程序添加工具提示消息？

什么是最简单,最干净的方法来创建HTML,鼠标悬停工具提示而不使用大量额外的js引用？

<img id=Pennstate src="/blah" style="cursor:pointer;">

鼠标悬停在那,并有一个很好的工具提示"我们是Pennstate!"

我不是百分之百确定这是可能的,因为input没有rel属性(Bootstrap网站上的示例只显示了1个示例rel="tooltip"),但我认为它应该可行.

这是我的HTML:

<input id="password" type="password" /> 

这就是我尝试触发它的方式:

$(document).ready(function () {

    $('input[id=password]').tooltip({'trigger':'focus'});
});

我也试过这个:

$('#password').tooltip({'trigger':'focus'});

而且它们似乎都没有用.我最终想手动触发它,但这是第一步.有人知道解决方案吗？有可能吗？谢谢.

我的问题是,当图表绘制区域小于高图工具提示时,工具提示的一部分被隐藏在溢出图表绘制区域的位置.

我希望工具提示始终可见,无论图表绘制区域的大小如何.

没有CSS设置有帮助,也没有更高的z-index设置帮助.

这是我的例子...... http://twitpic.com/9omgg5

任何帮助将主要是apreciated.

谢谢.

默认情况下,Bootstrap工具提示将文本对齐到中间.我想左边对齐.有没有什么好的方法在HTML中执行此操作,而不是修改CSS文件？

这是我的示例代码:

<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p>

<script type="text/javascript">
   $(document).ready(function () {
      $("p").tooltip();
   });
</script>

我已经尝试但它没有用:

<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p>

目前我有以下代码来显示工具提示.

<Border BorderBrush="Black"
        BorderThickness="{Binding Border}"
        Height="23"
        Background="{Binding Color}">
<ToolTipService.ToolTip>
    <TextBlock Text="{Binding TooltipInformation}" />
</ToolTipService.ToolTip>

这在ItemsControl中显示,包含大约25个项目.其中只有少数的值设置为TooltipInformation

如果TooltipInforation是一个空字符串,它仍然显示包含文本块的工具提示框作为一个非常小的窗口(大约5px高和20px宽).即使我将文本块可见性设置为折叠.

如果TooltipInformation的值为null或空字符串,有没有办法完全删除工具提示？

不确定这是否可能,我试图在输入组内的glyphicon上调用工具提示,我的代码(不起作用)是;

<div class="input-group">
<input type="text" class="form-control" name="security" id="security"><span class="input-group-addon"><span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container: 'body' title="" data-original-title="Security Code"></span></span>
</div>

我正在使用Bootstrap 3和最新版本的jQuery.

有没有人在这里添加工具提示字体真棒图标？

我有以下jsfiddle,但似乎无法找到向图标添加工具提示的指南.

`

<header>
  <!-- icons for settings, change pwd and list of active sessions -->
  <div id="menuIcons">
    <i class="fa fa-cog"></i>
    <i class="fa fa-user"></i>
    <i class="fa fa-lock"></i>
  </div>

  <!-- display welcome text -->
  <div id="welcomeText">
    <p>Welcome Harriet</p>
  </div>

</header>