标签: tooltip

想象一下，我有一个带有 2 个列的无序列表，第 1 列是文件的名称，第 2 列是启用了工具提示的铅笔图标。当用户点击这个铅笔图标时，它会打开一个包含表单的工具提示。在这种形式中，用户将输入一个新文件并验证该值。

显示工具提示时，我将 jQuery 验证器附加到工具提示内的表单。问题是每次显示工具提示时，都会附加一个新的验证器。我只想将一个验证器附加到表单。如何成功检查表单是否已存在验证器？

var validator = forms.validate();
console.log(validator);

// always evaluate to true
if (validator) {

}

这似乎不起作用。有没有人有任何想法？

我正在使用这个功能

chart.yAxis2.tickFormat(function(d) { return '$' + d3.format(',f')(d) });

为了将美元符号和货币格式附加到我的 y 轴之一。

是否可以在工具提示中显示美元符号和货币格式？

这是我的图表：http : //codepen.io/neonpulp/pen/zBZgrv。下面也是代码。提前致谢！

function buildGraph(){
    //this will hold of our main data consists of multiple chart data
    var data = [];

    //variables to hold monthly month
    var monthList = ['Ene 2016','Feb 2016','Mar 2016','Apr 2016','May 2014','Jun 2016','Jul 2016','Aug 2016', 'Sep 2016', 'Oct 2016', 'Nov 2016', 'Dec 2016'];
    var monthlyIncome = [0, 2757820, 3447270, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var companiesNumber = [0, 4, …

此代码不起作用。也尝试不使用 JS，将属性放入<input>. 似乎没有任何效果。

$('#radio1').tooltip({
    placement: "bottom",
    trigger: "hover"
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="btn-group" data-toggle="buttons">

    <label class="btn btn-primary active">
        <input type="radio" name="options" id="radio1" autocomplete="off" 
            data-toggle="tooltip" title="tooltip on radio!">Radio 1
    </label>

    <label class="btn btn-primary">
        <input type="radio" name="options" id="radio2" autocomplete="off">Radio 2
    </label>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

如何获得跟随光标的工具提示。我的工具提示出现在右下角。只出现了一部分：

这是代码：

$(document).ready(function(e) 
{
    // By suppling no content attribute, the library uses each   elements title attribute by default
    $('#visualization').qtip({
        // Simply use an HTML img tag within the HTML string
        content: 'i am a qtip'
    });
});

我已经实现了 ngx-bootstrap 的工具提示，并且工具提示在正常情况下工作正常。但我想有条件地显示工具提示。

当我包含 isDisabled 属性时，我在以下任何场景中都看不到工具提示。我错过了什么吗？

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="true"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

（或者）

<span tooltip="{{toolTipText}}" triggers="" #pop="bs-tooltip" placement="bottom" isDisabled="false"></span>
<button type="button" (click)="toggleSelect()" (mouseenter)="pop.show()" (mouseleave)="pop.hide()">
    <span class="pull-left">Click Here!</span>
</button>

我试图在反应引导工具提示中更改工具提示背景颜色。

从这篇文章中，它可以在 css 文件中更改。但是我有可能显示 40 种不同的颜色。

我一直在尝试这样做：

<Tooltip id={this.props.name} style={{".tooltip_inner":{"background":backgroundColor}}}>{this.props.name}</Tooltip>

但这不起作用。我无法在渲染中设置 tooltip_inner 并且我不确定如何动态访问它。我试过 getElementsBy-Name 但这也不起作用。

感谢您的任何帮助。

我需要一些帮助来显示 AngularJS 的“工具提示”。问题是我ng-repeat在表格中，在某些行上显示了一个按钮，该按钮应该在悬停时显示工具提示。

工具提示正在显示，但问题是当我将鼠标悬停在一行时，所有行都显示了工具提示。它可能更好地在图像上说明：

这是我在控制器中的代码：

$scope.demo = {
            showTooltip: false,
            tipDirection: 'right'
        };

如果需要，这是我的表：

<md-card  ng-repeat="container in containers | toArray:false |  filter:searchText.container.name">

    <md-toolbar>
        <div class="md-toolbar-tools">
            <h3>
                <span>{{container.account_name}}</span>
            </h3>
        </div>
    </md-toolbar>

    <md-card-title>
        <table class="table">
            <thead>
            <tr>
                <th>AccountName</th>
                <th>AccountID</th>
                <th>ContainerID</th>
                <th>ContainerName</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><a href="{{container.tagManagerUrl}}">{{container.account_name }}</a></td>
                <td>{{ container.accountId }}</td>
                <td>{{ container.containerId }}</td>
                <td ng-if="!container.missing_live"><a href="/gui/tags/{{container.path}}">{{container.name}}</a></td>
                <td ng-if="container.missing_live">{{container.name}}


                    <md-tooltip md-visible="demo.showTooltip">Missing Live Container</md-tooltip>
                    <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>


                </td>




                <td> <md-button class="md-icon-button" aria-label="More">
                    <ng-md-icon icon="more_vert"></ng-md-icon>
                </md-button></td>
            </tr>
            </tbody>
        </table> …

我必须在鼠标悬停时在 react d3 v4 条形图上添加工具提示。我尝试了下面提到的自定义功能，

onMouseOverHandler(d){
   var tooltip = d3Select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

    tooltip.transition().duration(200).style("opacity", .9);      
    tooltip.html(d)  
    .style("left", d3Select(this).attr("cx") + "px")     
    .style("top", d3Select(this).attr("cy") + "px");

但它不起作用。有人能帮我解决这个问题吗？

谢谢，阿伦 S

我将触发器用作悬停，但是当我单击具有此功能的链接时，工具提示不会消失，它会永远干扰屏幕

使用此代码实例化工具提示

$('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    trigger: 'hover'
});

在标签中一切正常，在某些情况下也能正常工作，我不知道为什么会发生这种情况，有人可以给我点灯吗？

编辑：我也尝试使用此代码隐藏带有单击事件的工具提示

$(document).ready(function(){
     $('[data-toggle="tooltip"]').click(function () {
         $('[data-toggle="tooltip"]').tooltip("hide");
     });
});

但它不起作用

编辑*：它是如何的图片（文本是葡萄牙语）

编辑**：HTML代码

<ul style="clear: both;" class="pager wizard">
    <li class="button-previous previous"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
    <li class="voltar"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>

    <li class="finalizar"><a>Finalizar<i class="fa fa-check" style="padding-left:5px;"></i></a></li>
    <li class="next"><a class="competencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>

我有一个 Angular Material 工具提示，用于在将鼠标悬停在表格元素中的列单元格上时显示信息。除了这个功能之外，我还要求用户能够选择文本并从表格元素中突出显示它，以便他们可以复制和粘贴它。

因为我使用 Angular Material 工具提示和 ::ng-deep 将它显示在列的顶部，它会在现有的 DOM 元素上创建一个叠加层，因此我无法选择列中的文本。有没有办法解决？我必须编辑 matToolTip 类吗？

谢谢！

我的最终解决方案是使用更原生的工具提示元素，这些元素将成为 DOM 的一部分，并且不会阻止用户选择文本，但这不是那么漂亮，所以这是我最后的手段。

edit.component.html

import { MatTooltipModule } from '@angular/material/tooltip';

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

edit.component.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

用户应该能够将鼠标悬停在该列上并查看工具提示，并突出显示该列的表格中的文本。