Bootstrap工具提示不透明度更改?

时间:2015-07-17 00:35:11

标签: jquery css twitter-bootstrap backbone.js marionette

我一直在添加一些Twitter Bootstrap工具提示到我为创建Backbone而创建的基础调查网站。

除了工具提示添加到分支按钮外,我的所有工具提示看起来都是正确的。

以下是坏人的样子: enter image description here

以下是其他所有人的看法: enter image description here

它几乎就像它的不透明度为.8而其他的都是1.但是我并没有改变我添加它们的方式,所以我对发生了什么感到困惑。

我发现了一个不同的SO建议:

.tooltip.in {
    opacity: 1;
    filter: alpha(opacity=100);
}

但这似乎不起作用。

以下是我如何添加一个好的工具提示:

<div id="arrow-up"><i class="fa fa-arrow-up" title="You can rearrange the order that the questions appear in using the arrows next to each question." data-toggle="tooltip" data-placement="left"></i> </div>

?的另一个版本:

<input type="checkbox" id="imageQuestion" class="image-question" checked> 
<label for="imageQuestion">Add Image to Question</label> 
<i class="fa fa-question-circle tooltip-info" title="If you would like to add an image to the question, check the 'Add Image to Question' box." data-toggle="tooltip" data-placement="right"></i>

以下是我添加错误的方法(可能是注释 - 此视图是包含其他工具提示的视图的子视图。问题视图有许多答案子视图):

<a data-toggle="modal" data-target="#<%= @id %>" class="btn manage-skip active"><i class="fa fa-code-fork" title="You can branch your survey answers so that certain answers will lead to different questions. Use this to tailor your messages and survey paths to the people that you are looking to find." data-toggle="tooltip" data-placement="left"></i></a>

然后在“答案”和“问题”视图中,我显示工具提示视图:

onShow: ->
      $('[data-toggle="tooltip"]').tooltip()

2 个答案:

答案 0 :(得分:1)

Bootstrap 4.0

.tooltip.show {
  opacity: 1;
}

答案 1 :(得分:0)

看起来问题是我试图在链接中附加工具提示到模态。当我将它添加到围绕a的div中时,它按预期工作:

<div class="inline" title="You can branch your survey answers so that certain answers will lead to different questions. Use this to tailor your messages and survey paths to the people that you are looking to find." data-toggle="tooltip" data-placement="left"><a data-toggle="modal" data-target="#<%= @id %>" class="btn manage-skip active"><i class="fa fa-code-fork"></i></a></div>