skip to Main Content

I’ve been adding some Twitter Bootstrap tooltips to a basic survey site I’ve been creating to learn Backbone.

All of my tooltips look correct except the tooltip added to the branching button.

Here’s how the bad one looks:
enter image description here

Here’s how all of the others look:
enter image description here

It’s almost like it has an opacity of .8 while the others are 1. But I’m not changing how I’m adding them so I’m perplexed as to what’s going on.

I found a different SO that recommends doing:

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

But that doesn’t seem to work.

Here’s how I’m adding a good tooltip:

<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>

Another version with the ?:

<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>

Here’s how I’m adding the bad one (possibly of note – this view is a child view of the view that contains the other tooltips. The Question view has many Answer childviews):

<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>

Then in both the Answer and Question views I show the tooltips view this:

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

2

Answers


  1. Chosen as BEST ANSWER

    It looks like the issue is that I was trying to attach a tooltip within a link to a modal. When I added it to a div wrapped around the a it worked as expected:

    <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>
    

  2. Bootstrap 4.0

    .tooltip.show {
      opacity: 1;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search