tooltip 相关问题

将 Syncfusion 工具提示格式与轴分开

我希望能够以不同于 y 轴的方式设置工具提示中的文本格式。 y 轴不显示分。我只想在工具提示上显示美分。格式化完成...

如何在工具提示数据中显示图像？

我找到了一个示例工具提示 html css，它正是我正在寻找的。但我不想显示文本，而是想显示图像。链接在这里。 代码笔链接 我们也可以在数据上显示图像吗...

为什么 Plotly.js 散点图中工具提示显示在错误的点上？

我在 Plotly 社区发布了这个问题：https://community.plotly.com/t/why-does-the-tooltip-show-on-the-wrong-point-in-scatter-plot/ 78835。我再次在这里发布以获得更多

如何使引导工具提示保持可见，直到单击链接

我有一个链接，当用户有一些新通知时，我将使用该链接作为通知，我将通过显示工具提示（twitter bootstrap 工具提示）来通知用户。我想要实现的是...

一键颤动工具提示

我想在单击时显示工具提示，而不是长按时显示。 谁能帮我这个？ 工具提示（ 消息：e.title， 孩子：卡（ 语义容器：true， 孩子：填充（ 填充：

在 VsCode 中禁用工具提示

我是个新人，但在此处搜索并尝试禁用 CodeLens 后并没有解决我的问题。 我从 VsCode 中的 python 数据科学开始，例如，如果我要创建一个 Numpy 数组，它会显示...

如何调整Material UI Tooltip字体大小？

我用 Material UI 实现了一个工具提示，但字体太小了。我无法用 .scss 更改它。 从“反应”导入反应； 导入“./InfoTooltip.scss”； 导入信息图标

当文本因溢出而被修剪时显示工具提示

我在文本顶部显示工具提示，让用户看到人员的全名，但无论文本是否溢出，它都会显示工具提示： 子项：工具提示（ 消息：fullNameWit...

向 MatTooltip 添加箭头

我想在 Angular 16 上使用 MatTooltip 添加一个箭头。但是由于某种原因，使用箭头的伪元素覆盖材质并不像许多帖子中建议的那样工作。 这是我的同事...

如何在动态元素上绑定引导工具提示

使用Bootstrap工具提示时，我们需要编写这样的代码才能具有工具提示功能： $(".showtooltip").tooltip(); 但问题是，每次新的 c 时，我们都需要重新运行该代码...

在AG网格中，仅显示溢出单元格的文本的工具提示

我有一个有两列的农业网格表。对于第一列，我显示名称和区域。当用户将鼠标悬停在名称和区域上时，我希望名称显示在工具提示中。 ...

应用工具提示菜单选项后，显示在窗口中的不同位置，而不是材料 ui 中的按钮图标下方。同样的问题怎么解决

我正在尝试将工具提示应用于选项菜单图标，但它没有按我预期的方式工作。 我的代码是： 导出默认函数 FadeMenu() { const [anchorEl, setAnchorEl] = React.useState(null) ...

创建自定义语音气泡工具提示，根据每种情况调整/放置其箭头/指针

我有一个 WPF 语音气泡工具提示，运行良好。 <Setter Property="OverridesDefaultStyle" ...</desc> <question vote="0"> <p>我有一个 WPF 语音气泡工具提示，运行良好。</p> <pre><code>&lt;Style x:Key=&#34;{x:Type ToolTip}&#34; TargetType=&#34;ToolTip&#34;&gt; &lt;Setter Property=&#34;OverridesDefaultStyle&#34; Value=&#34;true&#34; /&gt; &lt;Setter Property=&#34;HorizontalOffset&#34; Value=&#34;1&#34; /&gt; &lt;Setter Property=&#34;VerticalOffset&#34; Value=&#34;1&#34; /&gt; &lt;Setter Property=&#34;Background&#34; Value=&#34;White&#34; /&gt; &lt;Setter Property=&#34;Foreground&#34; Value=&#34;Black&#34; /&gt; &lt;Setter Property=&#34;FontSize&#34; Value=&#34;12&#34; /&gt; &lt;Setter Property=&#34;FontFamily&#34; Value=&#34;Segoe UI&#34; /&gt; &lt;Setter Property=&#34;DataContext&#34; Value=&#34;{Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}&#34;/&gt; &lt;Setter Property=&#34;Template&#34;&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType=&#34;ToolTip&#34;&gt; &lt;Canvas Width=&#34;225&#34; Height=&#34;131&#34;&gt; &lt;Path x:Name=&#34;Container&#34; Canvas.Left=&#34;0&#34; Canvas.Top=&#34;0&#34; Margin=&#34;0&#34; Data=&#34;M8,7.41 L15.415,0 L22.83,7.41 L224,7.41 L224,130 L0,130 L0,7.41 L8,7.41&#34; Fill=&#34;{TemplateBinding Background}&#34; Stroke=&#34;Gray&#34;&gt; &lt;Path.Effect&gt; &lt;DropShadowEffect BlurRadius=&#34;10&#34; Opacity=&#34;0.5&#34; ShadowDepth=&#34;4&#34; /&gt; &lt;/Path.Effect&gt; &lt;/Path&gt; &lt;TextBlock Canvas.Left=&#34;10&#34; Canvas.Top=&#34;10&#34; Width=&#34;100&#34; Height=&#34;65&#34; Text=&#34;{TemplateBinding Content}&#34; TextWrapping=&#34;WrapWithOverflow&#34; /&gt; &lt;/Canvas&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>上述方法的问题是，无论情况如何，语音气泡工具提示（路径）的箭头/指针始终放置在相同的位置，我希望它适应情况并使用以下之一（以上样式实现箭头位于左上角，下面屏幕截图中的第一个工具提示）：</p> <p><a href="https://i.stack.imgur.com/T2MdB.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL1QyTWRCLnBuZw==" alt=""/></a></p> <p>我该怎么做？可以吗？</p> </question> <answer tick="false" vote="1"> <p>这是此任务的完整代码：</p> <pre><code>using System.Windows; using System.Windows.Controls; using System.Windows.Media; namespace Decorators { public enum Position { None, Top, Bottom, RightSide, LeftSide, } public enum SpecificPosition { None, LeftOrTop = 25, Center = 50, RightOrBottom = 75, } internal class BubbleTextDecorator : Decorator { #region DependencyProperties public static readonly DependencyProperty VerticalMarginProperty = DependencyProperty.Register(&#34;VerticalMargin&#34;, typeof(double), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender)); public double VerticalMargin { get { return (double)GetValue(VerticalMarginProperty); } set { SetValue(VerticalMarginProperty, value); } } public static readonly DependencyProperty HorizontalMarginProperty = DependencyProperty.Register(&#34;HorizontalMargin&#34;, typeof(double), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender)); public double HorizontalMargin { get { return (double)GetValue(HorizontalMarginProperty); } set { SetValue(HorizontalMarginProperty, value); } } public static readonly DependencyProperty PointerPositionProperty = DependencyProperty.Register(&#34;PointerPosition&#34;, typeof(Position), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(Position.None, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure)); public Position PointerPosition { get { return (Position)GetValue(PointerPositionProperty); } set { SetValue(PointerPositionProperty, value); } } public static readonly DependencyProperty AlignmentPositionProperty = DependencyProperty.Register(&#34;AlignmentPosition&#34;, typeof(SpecificPosition), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(SpecificPosition.None, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure)); public SpecificPosition AlignmentPosition { get { return (SpecificPosition)GetValue(AlignmentPositionProperty); } set { SetValue(AlignmentPositionProperty, value); } } public static readonly DependencyProperty PointerHeightProperty = DependencyProperty.Register(&#34;PointerHeight&#34;, typeof(double), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender)); public double PointerHeight { get { return (double)GetValue(PointerHeightProperty); } set { SetValue(PointerHeightProperty, value); } } public static readonly DependencyProperty PointerWidthProperty = DependencyProperty.Register(&#34;PointerWidth&#34;, typeof(double), typeof(BubbleTextDecorator), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsArrange | FrameworkPropertyMetadataOptions.AffectsRender)); public double PointerWidth { get { return (double)GetValue(PointerWidthProperty); } set { SetValue(PointerWidthProperty, value); } } #endregion protected override Size ArrangeOverride(Size arrangeSize) { Size desiredSize = base.ArrangeOverride(arrangeSize); if (Child != null) { switch (PointerPosition) { case Position.Top: Child.Arrange(new Rect(new Point(0.0, PointerHeight), new Point(desiredSize.Width, desiredSize.Height))); break; case Position.Bottom: Child.Arrange(new Rect(new Point(0.0, 0.0), new Point(desiredSize.Width, desiredSize.Height - PointerHeight))); break; case Position.LeftSide: Child.Arrange(new Rect(new Point(PointerHeight, 0.0), new Point(desiredSize.Width, desiredSize.Height))); break; case Position.RightSide: Child.Arrange(new Rect(new Point(0.0, 0.0), new Point(desiredSize.Width - PointerHeight, desiredSize.Height))); break; } } return arrangeSize; } protected override Size MeasureOverride(Size constraint) { Size desiredSize = base.MeasureOverride(constraint); Size size = (PointerPosition == Position.Top || PointerPosition == Position.Bottom) ? new Size(desiredSize.Width + (HorizontalMargin * 2), desiredSize.Height + (VerticalMargin * 2) + PointerHeight) : new Size(desiredSize.Width + (HorizontalMargin * 2) + PointerHeight, desiredSize.Height + (VerticalMargin * 2)); return size; } protected override void OnRender(DrawingContext drawingContext) { Brush renderBrush = Brushes.Transparent; Pen renderPen = new Pen(Brushes.Black, 1); StreamGeometry geom = new StreamGeometry(); switch (PointerPosition) { case Position.Top: DrawTop(geom); break; case Position.Bottom: DrawBottom(geom); break; case Position.RightSide: DrawRight(geom); break; case Position.LeftSide: DrawLeft(geom); break; } // Some arbitrary drawing implements. drawingContext.DrawGeometry(renderBrush, renderPen, geom); } private void DrawLeft(StreamGeometry geom) { using (StreamGeometryContext ctx = geom.Open()) { ctx.BeginFigure( new Point(PointerHeight, 0.0), true, true); ctx.LineTo( new Point(ActualWidth, 0.0), true, false); ctx.LineTo( new Point(ActualWidth, ActualHeight), true, false); ctx.LineTo( new Point(PointerHeight, ActualHeight), true, false); ctx.LineTo( new Point(PointerHeight, (ActualHeight * (double)AlignmentPosition / 100) + (PointerWidth / 2)), true, false); ctx.LineTo( new Point(0.0, ActualHeight * (double)AlignmentPosition / 100), true, false); ctx.LineTo( new Point(PointerHeight, (ActualHeight * (double)AlignmentPosition / 100) - (PointerWidth / 2)), true, false); ctx.LineTo( new Point(PointerHeight, 0.0), true, false); } } private void DrawRight(StreamGeometry geom) { using (StreamGeometryContext ctx = geom.Open()) { ctx.BeginFigure( new Point(0.0, 0.0), true, true); ctx.LineTo( new Point(ActualWidth - PointerHeight, 0.0), true, false); ctx.LineTo( new Point(ActualWidth - PointerHeight, (ActualHeight * (double)AlignmentPosition / 100) - (PointerWidth / 2)), true, false); ctx.LineTo( new Point(ActualWidth, ActualHeight * (double)AlignmentPosition / 100), true, false); ctx.LineTo( new Point(ActualWidth - PointerHeight, (ActualHeight * (double)AlignmentPosition / 100) + (PointerWidth / 2)), true, false); ctx.LineTo( new Point(ActualWidth - PointerHeight, ActualHeight), true, false); ctx.LineTo( new Point(0.0, ActualHeight), true, false); ctx.LineTo( new Point(0.0, 0.0), true, false); } } private void DrawBottom(StreamGeometry geom) { using (StreamGeometryContext ctx = geom.Open()) { ctx.BeginFigure( new Point(0.0, 0.0), true, true); ctx.LineTo( new Point(ActualWidth, 0.0), true, false); ctx.LineTo( new Point(ActualWidth, ActualHeight - PointerHeight), true, false); ctx.LineTo( new Point((ActualWidth * (double)AlignmentPosition / 100) + (PointerWidth / 2), ActualHeight - PointerHeight), true, false); ctx.LineTo( new Point(ActualWidth * (double)AlignmentPosition / 100, ActualHeight), true, false); ctx.LineTo( new Point((ActualWidth * (double)AlignmentPosition / 100) - (PointerWidth / 2), ActualHeight - PointerHeight), true, false); ctx.LineTo( new Point(0.0, ActualHeight - PointerHeight), true, false); ctx.LineTo( new Point(0.0, 0.0), true, false); } } private void DrawTop(StreamGeometry geom) { using (StreamGeometryContext ctx = geom.Open()) { ctx.BeginFigure( new Point(0.0, PointerHeight), true, true); ctx.LineTo( new Point((ActualWidth * (double)AlignmentPosition / 100) - (PointerWidth / 2), PointerHeight), true, false); ctx.LineTo( new Point(ActualWidth * (double)AlignmentPosition / 100, 0.0), true, false); ctx.LineTo( new Point((ActualWidth * (double)AlignmentPosition / 100) + (PointerWidth / 2), PointerHeight), true, false); ctx.LineTo( new Point(ActualWidth, PointerHeight), true, false); ctx.LineTo( new Point(ActualWidth, ActualHeight), true, false); ctx.LineTo( new Point(0.0, ActualHeight), true, false); ctx.LineTo( new Point(0.0, PointerHeight), true, false); } } } } </code></pre> <p>这就是你如何使用它：</p> <pre><code>&lt;localdecorators:BubbleTextDecorator PointerHeight=&#34;10&#34; PointerWidth=&#34;20&#34; PointerPosition=&#34;LeftSide&#34; AlignmentPosition=&#34;Center&#34; VerticalMargin=&#34;30&#34; HorizontalMargin=&#34;30&#34; HorizontalAlignment=&#34;Left&#34;&gt; &lt;TextBlock Text=&#34;this&#34; HorizontalAlignment=&#34;Center&#34; VerticalAlignment=&#34;Center&#34;/&gt; &lt;/localdecorators:BubbleTextDecorator&gt; </code></pre> <p><a href="https://i.stack.imgur.com/0ycsH.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tLzB5Y3NILnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="0"> <p>目前我正在努力解决同样的问题。 您已经有解决这个问题的方法了吗？</p> <p>致以诚挚的问候</p> </answer> <answer tick="false" vote="-1"> <p>这是创建Decorator的典型案例。我曾经围绕文本制作了一个可定制的 ArrowBorder。你需要继承Decorator类。</p> <pre><code>internal class ArrowBorderDecorator : Decorator </code></pre> <p>然后你需要一些 DependencyProperties 以便于自定义。 在我的例子中，这是 <pre><code>ArrowTipToArrowTriangleBaseDistance</code></pre> 属性，这意味着箭头应该有多“尖”。在你的例子中，气泡文本箭头应该在哪里。</p> <pre><code> public static readonly DependencyProperty ArrowTipToArrowTriangleBaseDistanceProperty = DependencyProperty.Register(&#34;ArrowTipToArrowTriangleBaseDistance&#34;, typeof(double), typeof(ArrowBorderDecorator), new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsMeasure | FrameworkPropertyMetadataOptions.AffectsRender)); public double ArrowTipToArrowTriangleBaseDistance { get { return (double)GetValue(ArrowTipToArrowTriangleBaseDistanceProperty); } set { SetValue(ArrowTipToArrowTriangleBaseDistanceProperty, value); } } </code></pre> <p>然后您需要重写 <pre><code>ArrangeOverride</code></pre>、<pre><code>MeasureOverride</code></pre> 和 <pre><code>OnRender</code></pre> 方法。前两个来自 Decorator 类，第三个来自 UIElement 类。</p> <p>这里有一个很好的<a href="https://stackoverflow.com/questions/66818340/measureoverride-and-arrangeoverride-what-is-really-availablesize-desiredsize">链接</a>来理解前两个。 在 <pre><code>OnRender</code></pre> 中，您有一个 DrawingContext，可以使用 DependenyProperties 绘制所需的形状。</p> <p>在这些之后，您可以像这样在 xaml 中使用装饰器：</p> <pre><code>&lt;localdecorators:ArrowBorderDecorator ArrowBaseHalfSegment=&#34;0&#34; FillColor=&#34;{DynamicResource MahApps.Brushes.Accent3}&#34; StrokeColor=&#34;{DynamicResource MahApps.Brushes.ThemeForeground}&#34; ArrowBorderThickness=&#34;1&#34; ArrowTipToArrowTriangleBaseDistance=&#34;10&#34;&gt; &lt;TextBlock Text=&#34;{Binding Path=Title}&#34; Foreground=&#34;{DynamicResource MahApps.Brushes.IdealForeground}&#34; Padding=&#34;10 1 10 1&#34; VerticalAlignment=&#34;Center&#34; FontWeight=&#34;Bold&#34;&gt; &lt;/TextBlock&gt;&lt;/localdecorators:ArrowBorderDecorator&gt; </code></pre> <p><a href="https://i.stack.imgur.com/bETwO.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2JFVHdPLnBuZw==" alt=""/></a> <a href="https://i.stack.imgur.com/njfyp.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL25qZnlwLnBuZw==" alt=""/></a></p> </answer> </body></html>

floatingStyles

我正在使用 "@floating-ui/react": "^0.25.4" 并且在调用 useFloating 钩子时，我没有在钩子调用的结果中获得 floatStyles 属性/字段（即使它没有标记...

如何使 matTooltip 可按角度滚动

我尝试通过在 matTooltipClass 中分配以下 css 属性来使 mat 工具提示可滚动 溢出-y：滚动； 最大高度：200px； 但这是行不通的。谁能建议如何制作 matTool...

将带有 svg 的 html 表格添加到 d3 树形图的工具提示中

我正在做一个可视化 Web 应用程序，它使用 d3 树形图呈现数据。 当用户将鼠标悬停在树状图上时，会出现一个工具提示，将数据显示为包含许多行和列的表格...

在 safari 中粘贴文本时获取工具提示

我使用此页面 https://web.dev/patterns/clipboard/paste-text/ 中的相同代码，按下它时会在 safari 中呈现工具提示，并且用户必须按下工具提示才能粘贴文本。它确实...

WPF 与 WinForms Oxyplot 自定义工具提示/跟踪器

我正在构建一个 WPF 应用程序并使用 OxyPlot 渲染图表。 为了最大化图表的性能，我切换到OxyPlot.WindowsForms并使用WindowsFormsH嵌入图表...

将 MUI 工具提示放置在容器内，使其不会溢出到容器之外

在此输入图像描述 例如- 在此图像中，当我将鼠标悬停在左侧的按钮（单击）上时，工具提示将离开红色边框容器。 同样的事情也发生在右边......

HTML/Sass：多行时工具提示的位置被破坏

我当前项目中的工具提示代码如下： HTML： 我当前项目中的工具提示代码如下： HTML： <div class="tooltip"> <img class="icons" src="(...)" alt="Icon"/> <span class="tooltip--text"> Hover-Text <span class="tooltip--text--arrow"></span> </span> </div> 萨斯： &--tooltip { cursor: pointer; position: relative; display: inline-block; &:hover { .tooltip--text { visibility: visible; opacity: 1; } } &--text { position: absolute; z-index: 1; visibility: hidden; width: 120px; max-width: 200px; background-color: #000; color: #fff; text-align: center; border-radius: 4px; padding: 3px 8px; margin-top: -3px; opacity: 0; transition: .3s; top: -45%; left: 45%; transform: translate(-50%, -50%); &--arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; bottom: -5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000 } } } 只要工具提示的文本在一行中，一切都可以根据需要完美运行。但是当工具提示有更多行时，工具提示的位置是错误的，我不知道如何解决这个问题。 如有任何帮助，我们将不胜感激，并提前致谢！ .tooltip--text { position: absolute; z-index: 1; visibility: hidden; width: 120px; max-width: 200px; background-color: #000; color: #fff; text-align: center; border-radius: 4px; padding: 3px 8px; margin-top: -3px; opacity: 0; transition: .3s; bottom: 100%; left: 45%; transform: translateX(-50%); }