标签: tooltip

我有一个HTML按钮.我试图根据按钮的"title"属性在其上呈现工具提示,但它不会呈现.主要是因为它被禁用了.

然后我尝试在一个范围中包裹按钮并设置范围的"标题"属性.

将鼠标悬停在跨度中包含的按钮上仍无效.工具提示将在跨度的任何其他部分呈现,而不是按钮标记的一部分.就像我在跨度和按钮中放置一些文本一样,将鼠标悬停在文本上会生成工具提示,但如果将鼠标悬停在按钮上则不会渲染.

那么:如何显示禁用按钮的工具提示？

title如果我想提供更多信息,我目前设置了一些HTML 的属性:

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

然后在CSS中:

.more_info {
  border-bottom: 1px dotted;
}

工作非常好,可视指示器移动鼠标,然后弹出更多信息.但是在移动浏览器上,我没有得到那个工具提示. title属性似乎没有效果.在移动浏览器中提供有关文本的更多信息的正确方法是什么？与上面相同,但使用Javascript来监听点击,然后显示工具提示外观对话框？有没有本机机制？

我有一个UI小部件,由于性能原因需要放在IFRAME中,因此我们可以轻松地将它联合到联属网站.窗口小部件的UI包括显示在其他页面内容顶部的工具提示.请参阅下面的屏幕截图或访问该网站以查看其实际操作.有没有办法让IFRAME中的内容与父框架的内容重叠？

如何在工具提示中添加换行符我已经实现了工具提示,但我无法在工具提示中添加多行或换行符.Below是我的代码

http://codepen.io/apps4any/pen/RWQLyr

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">
  <md-content layout-padding="">
    <md-button class="md-fab md-fab-top-right right" aria-label="Photos">
      <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
      <md-tooltip>
        List1<br>
        List2<br>
        List3<br>
        List4
      </md-tooltip>
    </md-button>
    <div style="margin-top: 150px;">
    </div>
  </md-content>
</div>

CSS:

.tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover {
  box-shadow: none;
  border: none;
  transform: none;
  -webkit-transform: none; }
.tooltipdemoBasicUsage .left {
  top: 70px !important;
  left: 56px !important; }
.tooltipdemoBasicUsage .right {
  top: 70px !important;
  right: 56px !important; }

JS

angular.module('MyApp')
.controller('AppCtrl', function($scope) {
  $scope.demo = …

根据文档可以关闭正在执行的功能$('body').off('.alert.data-api').
在工具提示的情况下,我从js控制台尝试了以下内容,$('body').off('.tooltip.data-api')但它没有禁用Bottons上的工具提示.
有什么提示如何先行？

我有一个具有title属性的input元素,当然这将带有工具提示和属性值的消息.

出于某种原因,此工具提示需要使用css进行样式设置.

怎么做到呢？我不知道它将在哪个容器中呈现,我对此一无所知.它也不能被firebug的开发工具访问

我正在尝试使用tootltips

.tooltip-inner{}

但我有麻烦因为我找不到如何设计工具提示小箭头.

如屏幕截图所示,工具提示的箭头为黑色,我想在其上添加新颜色:

有什么建议吗？

我正在使用CSS.Tooltips库来尝试获取工具提示以显示输入标记.我可以让它在ap标签上工作但不是输入标签.有任何想法吗？

这里是小提琴的链接:http://jsfiddle.net/cwlanca/BumU5/1/

HTML

<p data-tip="This is the text of the tooltip">This is a paragraph of text that has a tooltip.</p>
</br>
</br>
</br>
<input data-tip="This is the text of the tooltip" value="44"/>

CSS

[data-tip] {
    position:relative;

}
[data-tip]:before {
    content:'';
    /* hides the tooltip when not hovered */
    display:none;
    content:'';
    display:none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #1a1a1a;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0;
    width:0;
    height:0;
    position:absolute;
    top:30px;
    left:35px;
    z-index:8;
    font-size:0;
    line-height:0; …

我正在使用nvd3的piechart.js组件在我的网站上生成一个饼图.提供的.js文件包含几个var,如下所示:

var margin = {top: 30, right: 20, bottom: 20, left: 20}
    , width = null
    , height = null
    , showLegend = true
    , color = nv.utils.defaultColor()
    , tooltips = true
    , tooltip = function(key, y, e, graph) {
        return '<h3>' + key + '</h3>' +
               '<p>' +  y + '</p>'
      }
    , noData = "No Data Available."
    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')
;

在我的内联js中,我已经能够覆盖其中一些变量,比如这样(覆盖showLegend和margin):

var chart = nv.models.pieChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value }) …

给定一个现有的有效SVG文档,创建"信息弹出窗口"的最佳方法是什么,这样当你悬停或点击某些元素时(比方说)你弹出一个具有任意数量(即不仅仅是单行工具提示)的框.额外的信息？

这应该至少在Firefox中正确显示,如果图像被栅格化为位图格式,则不可见.