Bootstrap Tooltip not working using JS

Question

I am trying to make the bootstrap tooltip works in my app but nothing seems to work.. and it is driving me kind of crazy ... I can see the tooltip but it does not look like it should .. the animations does not work the styling is not working .. and I do not know how to fix it ..

I am working a a scale from 1-100% build on javascript .. and when a user hover on one of the scale step it shows the percentage - Have a look on the photo

here is my code : HTML:

{% load bootstrap %}
{% load static %}
{% load i18n %}
{% load survey_extras %}


  {% for form in response_form %}
         {% if form.field.widget.attrs.category == category.name or not form.field.widget.attrs.category %}
          
    {% endif %}
{% endfor %}
    
    

              
                
                  
                    
                      
                    
                    
                      {{ form.label|safe }}
                    
                  

                  {% if form.field.required %}
                     
                  {% endif %}
                
                     {% for error in  form.errors %}{{ error }}{% endfor %} 
                 


              
                  {% for field in form %}
                      
                        {{ field }}
                      
                  {% endfor%}

                  
                      {{ type }}
                      {% if "scale" == type %}

                          {% for scale in scales %}
                              {{ scale|safe }}
                          
                          
                              
                                  
                                      
                                        0%
                                      
                                      
                                        100%
                                      
                                  
                                
                          
                          

                          {% endfor %}
                      {% elif 'choice-scale' == type %}
                          

                          {% for scale in scales %}
                              
                                
                                  
                                
                                {{ scale|safe }}
                              
                              

                             
                             
                                 
                                     
                                         
                                           0%
                                         
                                         
                                           100%
                                         
                                     
                                   
                             
                              


                          {% endfor %}
                      {% endif %}

JavaScript:

function createScale(which){
    var index = parseInt(which);
    for(var i = 0; i <= 100; i++) {
        var strg = '';
        classScale[index].innerHTML += strg;
    }
}

header in my base.html:


    
    SoftScore - Team Recruitment Analytics

and this is how it should look :

edited img :

css:

.scale{
    display: inline-flex;
    border: black 1px solid;
    width:71%;
    margin:auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.numbers{
    width: 5px;
    height: 40px;
    background-color: #66bb9e;
    margin-right: 2px;
}

.numbers:hover {
    background-color: #fa7770;
}

.scale-title{
  display: inline-flex;
  width:71%;
  margin:auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}


.scaleleft{
font-size: 0.7rem;
text-align: left;
}

.scaleright{
  font-size: 0.7rem;
  text-align: right;
}

.answers p{
  margin-bottom: 3rem;
}

.scale-title .container .row .col{
padding-right:0;
padding-left: 0;
}

.tooltip-inner {
    background-color:#fa7770;
    margin-bottom: 3px;
    font-weight: 400;
    font-family: Ubuntu;
}

Robert · Accepted Answer

Your JavaScript creates the relevant tooltip components outside the DOM, meaning that your initialization as it is now ($(function() { } or $(document).ready()) won't affect those elements.

This is a very common problem with anything inserted via AJAX or otherwise outside the DOM and requires a minor variation as to how the selector is initialized.

With regard to Bootstrap, one option for the Tooltip component could be:

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

In the above code you are initializing the component to an existent element () and declaring the selector that would actually trigger the Tooltip to appear. This will affect any element within your regardless of whether it was part of the initial HTML DOM or not.

Note: In the above example I specify the container which you may or may not find necessary. You can read more about that particular option (and others) here:

https://getbootstrap.com/docs/4.0/components/tooltips/#options

Bootstrap Tooltip not working using JS

Answers (1)

Related Questions