标签: tooltip

我正在.Net WinForms中编写一个日历控件,它将显示每个日期的工具提示.

确定何时显示工具提示的最佳方法是什么？

立即显示它将MouseMove使它阻碍,所以我希望它显示鼠标悬停在每个日期单元格上.

该MouseHover事件仅在第一次悬停后触发MouseEnter,因此我无法使用它.

最好的方法是什么？

编辑:我正在使用WinForms

我有一个CSS工具提示，其中CSS3淡入，z-indexs设置为999。当我将鼠标悬停在链接上时，工具提示本身会将其他内容向下推，尽管我使用了一个跨度并将其转换为块。

这是我要做什么的一个示例，如何阻止它压低内容？

谢谢。

jQuery工具提示非常适合我表中的第一行数据.之后,我只在IE和FF中获得旧学校窗口默认工具提示.

以下是构建表数据的HTML:

foreach ($displayData as $row) {
echo '<tr bgcolor="' . $bgcolor[$a] . '">';
    echo '<td><span id="fancy" title="Course Description: - '.$row["TSTRDS"].'">'.$row["TSTRTP"].'</span></td>';
    echo '<td>'.$row["TSTRLC"].'</td>';
    echo '<td>'.$row["TSADDR"].'</td>';
    echo '<td>'.$row["TSDATE"].'</td>';
    echo '<td>'.$row["TSTIME"].'</td>';
    echo '<td>'.$row["TSCOST"].'</td>';
echo '</tr>';
echo '<tr bgcolor="' . $bgcolor[$a] . '">';
    echo '<td colspan="2"></td>';
    echo '<td>'.$row["TSCITY"].','.$row["TSST"].' '.$row["TSZIP"].'</td>';
    echo '<td colspan="3"></td>';
echo '</tr>';
$a = !$a; 

}

这是我的javascript:

$(document).ready(function(){
$('#fancy').tooltip({
    track: true,
    delay: 0,
    showURL: false,
    fixPNG: true,
    showBody: " - ",
    top: -15,
    left: 5
});

});

最后,我的CSS:

#tooltip {
position: …

我正在使用HTML5 Canvas.我已将图像(BitmapImages)添加到画布,我现在想要为这些位图图像添加简单的工具提示.

这可能吗 ？？？如果是这样,有人能告诉/告诉我如何实现这一目标吗？

我不确定它是否有所作为,但我也在使用Easel JS Framework ...

这是我目前拥有的一个例子:

var container = new Container(); // EaselJS Container
container.x = 100;
container.y = 100;

stage.addChild(container);

var image = new Image();
image.src = "image.png";

var bitmap = new Bitmap(image);
bitmap.x = 5;
bitmap.y = 5;
bitmap.mouseEnabled = true;

container.addChild(bitmap);

...

我没有测试过这段代码,但基本上创建了一个位图图像并添加到我的舞台上.我现在想为我的位图图像添加一个简单的工具提示,但似乎无法解决如何:(

任何帮助将不胜感激.

干杯,乔恩.

我有一个问题,Bootstrap工具提示导致我的输入字段上的间距崩溃.标记是:

<form>
  <div class="controls controls-row">
    <input class="span4" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span4">
    <input class="span1" data-original-title="Default tooltip" rel="tooltip" type="text" placeholder=".span1">
  </div>
</form>

我只是使用连线的默认值:

$('[rel="tooltip"]').tooltip();

我在这里创建了一个jsFiddle以显示问题:http://jsfiddle.net/bAaQP/2/

请注意,当输入获得焦点时,它会将空白折叠到控件的右侧.

我只是使用Bootstrap 2.2.2中的示例网格表单.表单元素具有相对跨度大小集,并包含在使用controls-row类装饰的div中.

我已尝试使用最新版本的Bootstrap-tooltip.js,但它仍然显示相同的行为.

bootstrap tooltip允许我通过仅指定"title"属性为元素指定工具提示:

<div title="This is a test tooltip"> ... </div>

有没有办法避免硬编码工具提示内容并指定一个javascript函数？我试过title ="javascript:myFunction()",但它没有解决它.

我查看了booststrap代码,它似乎包含对函数调用的支持我只是无法弄清楚语法:

来自bootstrap工具提示的片段:

, getTitle: function () { 
      var title
      , $e = this.$element
      , o = this.options

      title = $e.attr('data-original-title')
       || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

     return title
  }    

试图让以下工具提示在每个选项卡中工作,但对我不起作用....

小提琴

<div class="tabbable">
<ul class="nav nav-tabs" role="tablist">
    <li class=""> <a href="#tab1" role="tab" data-toggle="tab" data-original-title="Our Stories">
<img src="/files/cache/cf16a20834dcce2bb50055192c532fad_f35.png" width="94" height="48" alt="Our Stories">
</a>

    </li>
    <li class=""><a href="#tab2" role="tab" data-toggle="tab" data-original-title="Bond + Bond">
<img src="/files/cache/70517c921a870be3c0580871aa6e8e8a_f36.png" width="99" height="50" alt="Bond">
</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade" id="tab1">
            <h2>Our Stories</h2>

    </div>
    <div class="tab-pane fade" id="tab2">
            <h2>Bond</h2>

    </div>
</div>

JS

$('[data-toggle="tab"]').tooltip({
'placement': 'top'
})

是否有可能在标签链接上有工具提示？

当鼠标悬停在画布上的某些位置时,我正在尝试显示相应的工具提示.例如,当画布上的鼠标位置位于坐标(100,100)处时,显示工具提示1.当鼠标位置在(200,200)时,显示工具提示2等,

我已经添加了事件监听器来检测鼠标移动并获得鼠标位置.这是我的一部分:

window.addEventListener('mousemove',hover,false);
function getMousePos (canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}
function hover (event){
    pos = getMousePos(canvas,event);
    if (condition to detect mouse hover)
    //display tooltip_function (this is the function that I don't know how to implement)
}

我有一个数据驱动的集线器部分,可以很好地填充图像.视图模型包含我想要显示为工具提示的文本,但无法弄明白.

这是重要的片段:

<HubSection x:Uid="MyHub" x:Name="MyHubSection" Width="311">
   <HubSection.Header>
      <TextBlock x:Uid="HubMSectionHeader" 
                 Style="{StaticResource MainHubSectionHeaderStyle}" Text="Friends"/>
   </HubSection.Header>
   <DataTemplate>
      <StackPanel>
         <Button x:Name="InviteButton" Content="Send Invite" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="InviteButton_Click"/>
         <StackPanel >
            <Grid>
               <GridView ItemsSource="{Binding Friends}"  Background="{ThemeResource HubBackground}" x:Name="FriendGrid" >
                   <GridView.ItemTemplate >
                       <DataTemplate>
                           <Image Source="{Binding ProfilePhotoBitmap, Mode=TwoWay}" Height="100" Opacity="1" Stretch="Uniform" Tapped="Friend_Tapped"/>
                            <ToolTipService.ToolTip>
                                <TextBlock Text="{Binding FullName}"/>
                            </ToolTipService.ToolTip>
                         </DataTemplate>
                     </GridView.ItemTemplate>
                  </GridView>
               </Grid>
            </StackPanel>
         </StackPanel>
      </DataTemplate>
   </HubSection>

我正在尝试向我的按钮添加工具提示,我尝试了不同的方法,但是当我将鼠标放在按钮下时没有任何反应,这是我的代码的一部分,当我尝试添加此工具提示时,我创建了按钮guestButton

 {
    xtype : 'button',
    id : 'guestButton',
    text : 'Guest User',
    handleMouseEvents: true,
    width : 80,
    x : 70,
    y : 150,
    formBind : false,                       
    handler : function() {
    this.up().LoginGuest();
    }

在这里,当我试图创建工具提示

    var tooltips = [{
            target: 'guestButton',
            html: 'A very simple tooltip'
        }];
Ext.each(tooltips, function(config) {
        Ext.create('Ext.tip.ToolTip', config);
    });  

Ext.QuickTips.init();

谢谢 !