标签: tooltip

我有一个 SVG 元素，我想在 Angular 中的某个时刻添加一个 matTooltip。我观察到，如果我尝试像这样添加 matTooltip：

generate() {
  var svgEle = document.getElementById("testSVG");
  var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('id', "rect");
  rect.setAttribute('x', "73");
  rect.setAttribute('y', "95");
  rect.setAttribute('class', "st01");
  rect.setAttribute('width', "407");
  rect.setAttribute('height', "328");
  rect.setAttribute('matTooltip', "Info about the action");
  svgEle.append(rect)
}

使用html测试代码：

<div style="width:400px">
    <svg version="1.1" id="testSVG" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" 
    xml:space="preserve">
    <style type="text/css">
          .st01{fill:#F99191;}
          .st11{fill:#92B1F7;}
    </style>
    <rect x="638.5" y="146" class="st11" width="236" height="219" 
    matTooltip="Info about the action"/>
    </svg> 
</div>
<button mat-stroked-button (click)="generate()">Generate</button>

它不起作用。

这种情况下到底是什么问题呢？

TL/DR：想要使用react-table（带钩子的v7）悬停标题时显示工具提示。

我正在尝试使用新的 ReactTable 库为在 React 中创建的表创建一个简单的工具提示。我不知道如何将 ReactTable 导入 Stackoverflow 代码片段，但这里是该库的 npm 页面中示例表的分叉版本。我正在尝试修改此表以获得正确的工具提示标题。在此代码沙箱中，在创建数组App.js的位置columns，我已将以下tipText键添加到列中：

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
          tipText: 'Text for the First Name tooltip'
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          tipText: 'Text for the Last Name tooltip'
        },
      ],
    },{
      ...

...这样我就可以tipText在渲染表格时使用来显示工具提示。我还更改了<thead>元素渲染，以包含 的类th以及要显示的工具提示的跨度：

<thead>
  {headerGroups.map(headerGroup => (
    <tr {...headerGroup.getHeaderGroupProps()}>
      {headerGroup.headers.map(column => …

是否可以在 Angular 8 中使用自定义组件作为工具提示？
如果不直接对 mat-tooltip 进行样式设置，我想知道在使用该指令时是否可以使用自定义组件来显示为工具提示。就像“显示工具提示时，显示我的组件”。
能做到吗？

我在我的 Rails 应用程序 Rails 版本 4.2.11 中使用 Full Calendar v5.3.2。在初始化工具提示时，eventDidMount我收到一个错误，提示工具提示未定义

我在项目中使用 bootstrap.bundle 所以我认为我不需要 popper.js 作为工具提示，但我已经尝试在项目中添加 popper.js 但错误是相同的。

这是我用来初始化日历的代码

var calendarEl = document.getElementById('full_calendar');
    calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      displayEventTime: false,
      eventDidMount: function(info) {
        var tooltip = new Tooltip(info.el, {
          title: info.event.extendedProps.description,
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      }
    });

错误详情：

未捕获的ReferenceError：在t.componentDidMount（main.min.self368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js？body = 1：7）在main.min.self-368cb59d5b的eventDidMount（日历：1560）处未定义工具提示fd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在Array.some () 在 main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在我 (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37 245ac94224bed5714f0e5e4a5f.js?body=1:7) 在 main.min .self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224bed5714f0e5e4a5f.js?body=1:7 在 Array.some () 在 w (main.min.self-368cb59d5bfd4af3ab7b619eedaad5661cfc37245ac94224 bed5714f0e5e4a5f.js?body=1:7)

我认为按钮的状态更改（启用或禁用）导致了问题。我有 5 个操作按钮（创建、删除、编辑、保存和取消）。除“创建”按钮外，所有按钮一开始均被禁用。当我单击“创建”按钮时，它会被禁用，而“保存”和“取消”按钮将被启用。当它发生时，会弹出“保存”或“取消”工具提示。有时两个都会弹出，有时只弹出一个。第一次，我以为这是为了响应焦点事件而发生的。然后我尝试禁用工具提示响应焦点事件设置disableTriggerFocus = {true}，但它不起作用。

这是代码ActionButton：

import Tooltip from "@material-ui/core/Tooltip";

const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
  return (
    <>
      <Tooltip
        title={disabled ? "" : tooltip}
        placement="top"
        arrow
        disableTriggerFocus={true}
      >
        <Button onClick={onClick} disabled={disabled}>
          <ButtonIcon tag={buttonIcon} />
        </Button>
      </Tooltip>
    </>
  );
};

我试图仅在单击时显示工具提示，因此默认情况下我禁用了工具提示，当我单击跨度时，我重新启用工具提示。

但工具提示没有显示，我必须移出鼠标，然后将鼠标悬停在跨度上。

这是我的 html 模板

<span (click)="onClick()" [tooltipDisabled]="tooltipDisabled" pTooltip="My tooltip"
      tooltipPosition="top">My text</span>

这是我的打字稿

export class MyComponent {

  tooltipDisabled = true;

  constructor() {

  }

  onClick() {
    this.tooltipDisabled = false;
  }
}

我也尝试根据这个问题的答案来调度和事件，但它也不起作用。

有没有解决方案可以在我点击时显示工具提示？

我的 Mac(MacBook Pro M1) 上遇到一个奇怪的问题。我目前正在开发一款单游戏。突然鼠标悬停无法正常工作。如下图所示，工具提示仅显示一个 [O]。

鼠标悬停无法正常工作

智能感知也停止正常工作。工具提示为空，不显示方法头和其他信息。

智能感知表现得很奇怪

每个新项目和现有项目都会出现此问题。似乎是我的 Mac 上的全局 Visual Studio 问题。

我尝试过的是：

重新启动机器，重新启动 IDE。删除隐藏的 .vs 文件夹。项目的我在 Visual Studio 2019 Mac 安装上得到了相同的行为。

我尝试了其他项目模板，但工具提示均未显示。

我使用提供的卸载脚本卸载了安装，并重新安装了 Visual Studio 的干净版本，但没有成功。

另外，我没有安装任何第三方软件，例如 resharper。

Delphi 中的组件TTrackBar是标准 Windows 轨迹栏控件的包装器。当该PositionToolTip属性不是 None 时，拖动轨迹栏控件的滑块时会显示工具提示。

默认情况下，该工具提示显示控件的 Min 和 Max 之间的纯整数。有没有办法手动更新该位置工具提示文本，以便在音量控制的情况下可以将数值格式化为“80％”？

当查看Windows 轨迹栏控制文档时，似乎有一个TBM_GETTOOLTIPS消息，它允许检索工具提示的句柄。但不确定如何使用该句柄更新工具提示文本。

我使用一些html标签制作了用于摆动的工具提示

_graph.setToolTipText("<html><div style=\"width: 300px; height: 100px;" 
   +  " overflow: auto; border: 0;<p style=\"padding:2 5 2 5;\"></div>Please Wait...");

这 _graph是组件的对象.问题是,如果数据超出我需要滚动但它没有发生.请任何人建议我做滚动条.

我正在使用一个开源图表库,在图表上创建标记.(动态数据显示)我正在创建的标记是使用Rect对象创建的.我注意到System.Windows.Shapes中的所有Shapes都有一个ToolTip属性,但System.Windows.Rect没有.我希望弹出一个工具提示,告诉用户当鼠标悬停在标记上时标记的价格值.当鼠标进入rect占据的区域时,我正在考虑创建并弹出一个工具提示,但我不知道有多少可能考虑到矩形将被图表缩放/平移.还有其他建议吗？

这是我正在创建的标记的代码(来自Felice Pollano博客)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Text;
using System.Windows;
using System.Windows.Media;

namespace Microsoft.Research.DynamicDataDisplay.PointMarkers
{
public class CandleStickPointMarker:ShapePointMarker,ITransformAware
{
    public double CandlestickWidth
    {
        get { return (double)GetValue(CandlestickWidthProperty); }
        set { SetValue(CandlestickWidthProperty, value); }
    }
    public static readonly DependencyProperty CandlestickWidthProperty =
        DependencyProperty.Register("CandlestickWidth", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(4.0));
    public double CandlestickStrokeWidth
    {
        get { return (double)GetValue(CandlestickStrokeWidthProperty); }
        set { SetValue(CandlestickStrokeWidthProperty, value); }
    }

    public static readonly DependencyProperty CandlestickStrokeWidthProperty =
        DependencyProperty.Register("CandlestickStrokeWidth", typeof(double), typeof(CandleStickPointMarker), new UIPropertyMetadata(1.0));
    public Brush …