标签: twitter-bootstrap-tooltip

我需要在禁用按钮上显示工具提示,并在启用按钮上将其删除.实际上它以相反的方式工作.

反转此行为的最佳方法是什么？

$('[rel=tooltip]').tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

这是演示:http://jsfiddle.net/BA4zM/68/

PS:我想保持属性被禁用.

我试图在我的应用程序中使用Bootstrap工具提示.我的应用程序正在使用AngularJS目前,我有以下内容:

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

我想我需要用

$("[data-toggle=tooltip]").tooltip();

但是,我不确定.即使我添加上面的行,我的代码也不起作用.我试图避免使用UI引导程序,因为它比我需要的更多.但是,如果我只需要提供工具提示,我就会对此持开放态度.然而,我无法弄清楚如何做到这一点.

有人可以告诉我如何让Bootstrap Tooltip与AngularJS一起使用吗？

我试图在twitter bootstrap工具提示中显示一些长文本.正如你在下面的图片中看到的那样,事情并没有发生.有没有人可以轻松修复溢出引导工具提示的文本？

编辑(添加请求的代码):

在我的控制器中:

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
          ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
           productName + "</a>

在我看来:

$('.auto-tooltip').tooltip();

我正在使用ajax为我的注册提交表单,但是在尝试设置工具提示以显示从控制器返回的错误的错误消息时遇到问题.

JavaScript的:

$(document).on('ajax:success', '.user_modal_form', function(e, data, status, xhr) {
  var context;
  context = $(this);
  if (data.success) {
    $('button', context).hide();
    $('.spinner', context).show();
    location.reload();
  } else {
    if (data.errors != null) {
      $.each(data.errors, function(key, error) {
        var field;
        field = $("#athlete_" + key);
        field.attr('data-original-title', "" + key + " " + error).tooltip({
          trigger: 'manual'
        }).tooltip("show");
      });
    }
  }
});

错误信息: Uncaught Error: no such method 'show' for tooltip widget instance

我有一个$("#settings")div与多个引导工具提示附加到子元素.

例如,

<div id="settings" style="display: flex;">
  <tbody>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
    <tr>
      <td width="25%" class="left Special" style="font-size:150%">Content:</td>
      <td width="5%"></td>
      <td width="70%" class="Special settingswrong" style="font-size:200%"><div style="display:inline" data-toggle="tooltip" data-placement="right" title="" data-original-title="This is not what you are looking for!">Content</div></td>
    </tr>
  </tbody>
</div>

我想要$("#settings").tooltip('destroy')按下按钮上的所有这些工具提示,但它不起作用,我假设因为工具提示实际上不在设置div上,而是在其中.

但是我也试过了$('#settings').find('*').tooltip('destroy'),但也没用.

是因为我如何初始化它们？

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

访问div中所有工具提示的快速简便方法是什么？

来自twitter bootstrap的标准.tooltip具有我想删除的透明度.

这是我的HTML:

<a href="#" class="btn
btn-info" 
style="margin:10px;" 
data-toggle="tooltip" 
data-placement="bottom" 
data-html="true"
title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. <br /><br /> MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker.">Hover</a>

CSS:

.tooltip > .tooltip-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 450px;
    color: black;
    text-align: left;
    background-color: white;
    background: white;
    opacity: 1.0; …

我一直在研究一个项目,我注意到我想要解决的bootstrap行为的一些不一致.

当一个弹出框(或工具提示,无论如何,它们基本相同)接近屏幕的边缘 - 如果它是一个右边的,当接近边缘时 - 它会收缩,以便不要离屏(它只能起作用)达到一定程度,但这通常就足够了.

当展示位置在左侧时,不会发生这种情况.

即:

正确的位置:

正常宽度:

接近边缘:

左侧位置:

正常宽度:

接近边缘:

这些图片来自我写的一个小型DEMO来说明问题.

我搞乱了源代码,到目前为止无济于事.我似乎无法将手指放在究竟是什么原因导致这种行为.

有任何想法吗？

PS

我正在使用Bootstrap 3.1.1.新的3.2 没有解决问题(我想在此时避免升级).

重大更新!

经过一番挖掘,我发现这与bootstrap无关 - 这是简单的css - 似乎当你绝对定位一个元素并将它推到两侧时它会尝试并保持屏幕.

我从来不知道这种行为,它会自动发生 - 但只发生在您正在推动的方向 - 即从左侧推出的div将在到达屏幕的右边缘时收缩,反之亦然.

事实上,弹出窗口仅定位于left分配 - 这就是我们看到不一致行为的原因 - 当它被推向右侧时它收缩而不是另一个方向.

所以解决方案是分配right- 听起来很简单？没那么多.我拿了源代码并对其进行了一些操作,添加了这些行(在jsfiddle中的第250行):

if (placement == 'left' && offset.left < 0) {
    var right = ( $(window).width() + 10 ) - ( offset.left + actualWidth ); 

    offset.left = 0;
    $tip.offset(offset);
    $tip.css({ 'right': right });
} …

我有一个模态窗口,包括div:

<div class="input-group">
    <div class="input-group-addon" title="Insert here your domain account name" data-toggle="tooltip" data-placement="left" id="Account">
        @Html.Label("Domain account name", new { @class = "control-label" })
    </div>
    <div class="a">
        @Html.TextBoxFor(model => model.Login, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Login)
    </div>
</div>

如您所见,标签上有一个工具提示.

这是代码:

$('#Account').tooltip({ container: 'body' });

代码正在运行,但工具提示显示在模态后面.我试着z-index像这样设置工具提示:

.tooltip {
    z-index: 1151,!important;
}

要么

 #Account {
     z-index: 1151,!important;
 }

但他们都没有工作.

您能否建议我应该如何设置CSS以使此工具提示显示在模态之上？

我正在使用bootstrap 3.3工具提示,并且工具提示被裁剪/隐藏存在问题.我通过设置解决了这个data-container="body".

<!--...-->
<span class="callOutImg">
  <a href="#" data-toggle="tooltip" data-container="body" data-placement="top" class="optionTooltip" title="Hello my name is Inigo Montoya">
    <img src='/images/info-bubble-big.png' />
  </a>
</span>
<!--...-->

使用这些效果我的所有工具提示 - 这不是我想要的.

但是,我想在.tooltip-inner上设置一个特定的样式,仅用于页面上的工具提示的子集.现在包含这些工具提示,body因此范围或多或少是全局的.

我只能使用以下方法访问.tooltip-inner:

body .tooltip-inner {
  background-color: #40a0d0;
}

要么

.tooltip-inner {
  background-color: #40a0d0;
}

我该如何设置不同的data-container？(我尝试过类和id)或者有人可以建议一种限制.tooltip-inner选择范围的方法吗？

我正在使用UI Bootstrap(AngularJS)中的Ui-bootstrap popover .

页面边框的popover似乎离开了屏幕......

是否有更好的方法来定位弹出窗口 - 所以它可以留在屏幕内？

你可以看到popover被削减了......

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
  $scope.dynamicPopover = {
    content: 'Hello, World!',
    templateUrl: 'myPopoverTemplate.html',
    title: 'Title'
  };
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

    <div ng-controller="PopoverDemoCtrl">
      <h4>Dynamic</h4>
      <div class="form-group">
        <label>Popup Text:</label>
        <input type="text" ng-model="dynamicPopover.content" class="form-control">
      </div>
      <div class="form-group">
        <label>Popup Title:</label>
        <input type="text" ng-model="dynamicPopover.title" class="form-control">
      </div>
      <div class="form-group">
        <label>Popup Template:</label>
        <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
      </div>
      <button uib-popover="{{dynamicPopover.content}}" …