标签: tooltip

将链接放置在工具提示内

我遇到一种情况，需要在工具提示内显示链接。我发现了几个帖子，人们说最好的方法是隐藏 div，但我找不到任何这样做的例子。有人能指出我在正确的地方举个例子吗？

这是我迄今为止所掌握的 HTML 内容。我认为其余的工作将在 Jquery 中完成，这是我的弱点。

<td><%= f.check_box :raw_footage_check_finished, :checked => true %>
<div id="tooltip" style="display:none"><%= link_to 'Mark Incomplete', '#' %>
</div></td>

Run Code Online (Sandbox Code Playgroud)

我使用 Ruby on Rails 作为我的服务器端语言。

html jquery ruby-on-rails tooltip

作者

lucky-day

1
推荐指数

1
解决办法

8248
查看次数

如何在HTML中制作带引号的工具提示？

下面是一段 HTML 代码：

   <span title="Download this file to your computer">
   <a href="URL">
   <img src="SomeOtherURL" alt="Download" style="width:42px;height:22px;border:0">
   </a></span>

Run Code Online (Sandbox Code Playgroud)

工作正常，除非我的标题中没有引号。

然而，当它发生时：

<span title="Download "Shanghai Surprise" to your computer">
<a href="URL">
<img src="SomeOtherURL" alt="Download" style="width:42px;height:22px;border:0">
</a></span>

Run Code Online (Sandbox Code Playgroud)

然后一切都崩溃了。有没有办法让工具提示里面带引号？

html tooltip

bri*_*ant

2014 12-29

1
推荐指数

1
解决办法

3266
查看次数

如何更改工具提示上的背景颜色？

当我将鼠标悬停在 (i) 工具提示上时，背景颜色显示为黑色，当用户将鼠标悬停在工具提示上时，如何将背景颜色更改为蓝色。

到目前为止尝试过代码

字形图标.html

<label for="epcfLevel3Name" class="col-md-5 required">EPCF:<span tooltip="{{epcfObj.epcfToolTip}}" id="tooltip" class="glyphicon glyphicon-info-sign pull-right"></span></label>

Run Code Online (Sandbox Code Playgroud)

CSS

#tooltip {
    position: relative;
    color: #66CCFF;
}

Run Code Online (Sandbox Code Playgroud)

css tooltip twitter-bootstrap

aft*_*tab

2019 03-03

1
推荐指数

1
解决办法

1万
查看次数

自定义 dxChart 中的工具提示

我正在使用 DevExtreme 的 dxchart 迈出第一步。目前我有以下代码：

\n\n

HTML：

\n\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset="utf-8" />\n        <title>DevExtreme Chart</title>\n        <!--FRAMEWOKR-->\n        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>\n        <script src="./lib/globalize.min.js"></script>\n        <script src="./lib/dx.charts.js"></script>\n        <!--JS-->\n        <script type="text/javascript" src="chart.js"></script>\n    </head>\n    <body>\n        <div id="chartContainer" style="width:100%; height: 440px"></div>\n    </body>\n</html>\n

Run Code Online (Sandbox Code Playgroud)\n\n

JS：

\n\n

$(document).ready(function(){\n    var dataSource = [\n        {\n            argument: \'15.06.2016\',\n            puls: 102,\n            temperatur: 37.6,\n            weight: 91\n        },\n        {\n            argument: \'16.06.2016\',\n            puls: 99,\n            temperatur: 35.1,\n            weight: 88\n        },\n        {\n            argument: \'17.06.2016\',\n            puls: 87,\n            temperatur: 38.0,\n            weight: 87\n        },\n        {\n            argument: \'18.06.2016\',\n            puls: 91,\n            temperatur: …

Run Code Online (Sandbox Code Playgroud)

javascript charts devexpress tooltip devextreme

web*_*.ic

2017 10-08

1
推荐指数

1
解决办法

4531
查看次数

用户控制工具提示在透明部分不起作用

我有一个带有标签和图标的用户控件。当我将鼠标悬停在标签或图标上时，我设法显示工具提示。但是，当我将鼠标悬停在用户控件的透明部分上时，它不会显示。有没有办法来解决这个问题。

我已将工具提示放置在网格、堆栈面板中，控制它们自身以及用户控件标签，但工具提示仍然没有将用户控件视为显示工具提示的整个区域。

c# wpf tooltip

Sam*_*Sam

lucky-day

1
推荐指数

1
解决办法

360
查看次数

来自另一个 div 的 CSS 工具提示内容

我有一个 css 工具提示，通过将鼠标悬停在链接上来触发，然后从隐藏在链接文本中的 span 元素填充工具提示文本。

小提琴https://jsfiddle.net/70wxxhne/

但是我现在需要在弹出窗口中包含其他 html 元素，所以理想情况下我想从另一个 div（小提琴中的 note1）加载工具提示内容，单独使用 css 可以吗？

<--css-->
.ktooltip {
position: relative;
display: inline-block;
}

.ktooltip .ktooltiptext {
visibility: hidden;
background: #fff;
width: 150px;
text-align: center;
border-radius: 6px;
padding: 5px 5px;
top: -5px;
left: 105%;
border:2px solid grey;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.ktooltip:hover .ktooltiptext {
visibility: visible;
}

<p>Here is some text with a note here
<sup class="ref">
    <a href="#note1" id="note1" class="ktooltip">Tooltip
        <span class="ktooltiptext">Current Tooltip text</span>
    </a> …

Run Code Online (Sandbox Code Playgroud)

css tooltip

Pau*_*l M

lucky-day

1
推荐指数

1
解决办法

3442
查看次数

将特定的工具提示添加到 arraytoDataTable

我想向我的图表添加特定的工具提示。但是，我在将它们添加到 ArraytoDataTable 中时遇到问题。我在某处读到我应该添加“datatable.setcolumnproperty(3, 'role', 'tooltip')”。但也许它不在有效的地方？或者我必须提前指定角色吗？

这是我的代码：

google.load('visualization', '1', { 'packages': ['corechart'] } );

google.setOnLoadCallback(drawChart);

function drawChart() {


var data = google.visualization.arrayToDataTable([
    ['Kenmerk', 'Belangrijkheid', 'tooltip', { role: 'style' } ],
    ['testa', {10}, 'tooltip1', 'color: #394165'],
    ['testb', {20}, 'tooltip2', 'color: #0CA5AA'],
    ['testc', {30}, 'tooltip3', 'color: #F2941A'],
    ['testd', {40}, 'tooltip4', 'color: #E64E67']
    datatable.setcolumnproperty(3, 'role', 'tooltip');
  ]);

var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: function(dt, rowIndex) { return dt.getValue (rowIndex, 1).toString() + '%' },
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation" },
                   2]); …

Run Code Online (Sandbox Code Playgroud)

datatable dataview tooltip limesurvey

Mar*_*eke

lucky-day

1
推荐指数

1
解决办法

1683
查看次数

允许 <a> 标签标题属性中包含 html

我试图找到这个问题的解决方案，到目前为止我已经想出了这个允许 HTML 的管道

import { PipeTransform, Pipe } from "@angular/core";

@Pipe({
    name: "toHtml"
})
export class ToHtmlPipe implements PipeTransform {
    transform(content) {
        return `<b>${content}</b>`;
    }
}

Run Code Online (Sandbox Code Playgroud)

我有一个链接，它在悬停时显示数据工具提示：

<a *ngIf="day.Info.Info" data-toggle="tooltip" [title]="day.Info.Info | toHtml" placement="right"><i style="color:black" class="glyphicon glyphicon-comment"></i></a>

Run Code Online (Sandbox Code Playgroud)

然而，这是我得到的结果：

所以管道不起作用，据我所知，我无法使用[innerHtml]=""，因为它只是更改了字符串的链接，而不是图标。

在此先感谢您的帮助

javascript pipe tooltip angular

Nic*_*las

2017 08-10

1
推荐指数

1
解决办法

1772
查看次数

双显示器上的默认 html 工具提示显示在不正确的位置

我有一个简单的 HTML 代码，如下所示，我有一台 ACER 笔记本电脑（1290x1080）。当我在 chrome 浏览器上运行 HTML 代码时，HTML 的工具提示在主监视器上运行良好。当我使用第二台显示器（LG 显示器）时，标题属性的工具提示显示在 chrome 浏览器和 MS Edge 上的错误位置。

html代码如下：

<a title="Hello world!">Hover over me</a>

Run Code Online (Sandbox Code Playgroud)

请参阅下面的链接 img 以查看更多详细信息，或者您可以点击这里：在线代码在这里

错误图片在这里

html google-chrome tooltip microsoft-edge

Edw*_*ieu

2020 08-14

1
推荐指数

1
解决办法

1423
查看次数

按钮或图像上的 Swift ui macOS 弹出窗口

我希望我能像图片中看到的那样做这样的事情。

我正在尝试使用这段代码，但我不太明白如何修复它。

我希望我可以Button在ImageMac应该是图像的a或 an上使用它。

谁能帮我吗？

代码：

func showLittlePopoverWithMessage(sender: NSView, message: String) {
        let controller = NSViewController()
        controller.view = NSView(frame: CGRect(x: CGFloat(100), y: CGFloat(50), width: CGFloat(100), height: CGFloat(50)))

        let popover = NSPopover()
        popover.contentViewController = controller
        popover.contentSize = controller.view.frame.size

        popover.behavior = .transient
        popover.animates = true

        let invisibleWindow = NSWindow(contentRect: NSMakeRect(0, 0, 20, 5), styleMask: .borderless, backing: .buffered, defer: false)
        invisibleWindow.backgroundColor = .red
        invisibleWindow.alphaValue = 0

        //controller.view.addSubview(sender)
        popover.show(relativeTo: sender.bounds, of: sender as! NSView, preferredEdge: .maxY)
    }

Run Code Online (Sandbox Code Playgroud)