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

<table class="table">
    <!--<thead>
      <tr>
        <th> Question  </th>
        <th> Answers </th>
      </tr>
    </thead> -->
<tbody>
  {% for form in response_form %}
         {% if form.field.widget.attrs.category == category.name or not form.field.widget.attrs.category %}
          <tr class="{% if form.errors%} danger {% endif %}">
              <td>
                <div class="container-fluid">
                  <div class="question-title row">
                    <div class="col-5">
                      <img src="{% static 'images/RightSpeech.jpg' %}" class="img-fluid" alt="Responsive image">
                    </div>
                    <div class="col-7">
                      <h5>{{ form.label|safe }}</h5>
                    </div>
                  </div></div>

                  {% if form.field.required %}
                    <span class="glyphicon glyphicon-asterisk" style="color:red"> </span>
                  {% endif %}
                <span class="help-inline" style="color:red">
                    <strong> {% for error in  form.errors %}{{ error }}{% endfor %} </strong>
                </span> <br>

              <div class="answers">
                  {% for field in form %}
                      <ul>
                        {{ field }}
                      </ul>
                  {% endfor%}

                  <!--{% if "hidden" in form.field.widget.attrs %}-->
                      <p id="check" hidden>{{ type }}</p>
                      {% if "scale" == type %}<br>
                          {% for scale in scales %}
                              {{ scale|safe }}
                          <div id="rate" class="scale"></div>
                          <div class="scale-title">
                              <div class="container">
                                  <div class="row">
                                      <div class="col scaleleft">
                                        0%
                                      </div>
                                      <div class="col scaleright">
                                        100%
                                      </div>
                                  </div>
                                </div>
                          </div>
                          <br>
                          {% endfor %}
                      {% elif 'choice-scale' == type %}
                          <br>
                          {% for scale in scales %}
                              <div class="row questionbox">
                                <div class="col-1">
                                  <input onclick="peace(this)" name="{{ forloop.counter0 }}" type="checkbox" style="margin-right: 5px" class="checkbox">
                                </div>
                                {{ scale|safe }}
                              </div>
                              <br>
                             <div id="rate" class="scale"></div>
                             <div class="scale-title">
                                 <div class="container">
                                     <div class="row">
                                         <div class="col scaleleft">
                                           0%
                                         </div>
                                         <div class="col scaleright">
                                           100%
                                         </div>
                                     </div>
                                   </div>
                             </div>
                              <br><br>
                          {% endfor %}
                      {% endif %}
            <!--  {% endif %} -->
              </div>

            </td>
        </tr>
    {% endif %}
{% endfor %}
    </tbody>
</table>

<script>
// Initialize tooltip component
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
// Initialize popover component
$(function () {
  $('[data-toggle="popover"]').popover()
})
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

</script>

JavaScript:

function createScale(which){
    var index = parseInt(which);
    for(var i = 0; i <= 100; i++) {
        var strg = '<div class="numbers ' + i + ' ' + index + '"' +
            'onclick=\'select(this)\' data-toggle="tooltip" data-placement="top" title= "' + i + '%"></div>';
        classScale[index].innerHTML += strg;
    }
}

header in my base.html:

<head>
    <meta charset="utf-8">
    <title>SoftScore - Team Recruitment Analytics</title>
    <!-- CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static '/css/master.css' %}">
    <link href="{% static 'css/widgets.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/index.css' %}" rel="stylesheet">

    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico'%}"/>
    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico'%}"/>

    <!-- Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300|Ubuntu:300italic" rel="stylesheet">
    <link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="{% static "vendor/magnific-popup/magnific-popup.css" %}" rel="stylesheet">

    <!-- Java Script-->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper-utils.js" integrity="sha256-h4TIzOvCoquQKCItCFCPbGMXDe7dbjSQsgZkeS396kA=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>



  </head>

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 · 2017-12-14 18:39:46Z

3

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 (<body>) and declaring the selector that would actually trigger the Tooltip to appear. This will affect any element within your <body> 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

answered Dec 14, 2017 at 18:39

Robert

6,9871 gold badge23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Ben2pop Over a year ago

Thx you Robert, now popper is working .... but my tooltip is floating in my window ( you can see in my updated post ) How can I attaach it to the container <div id="rate" class="scale"></div> ?? please

Robert Over a year ago

Difficult to answer as we don't see the actual CSS being applied to . numbers ... if I had to hazard a guess I would assume that there are issues related to height and likely position settings.

Robert Over a year ago

I'm not as familiar with flex as I'd like to be at this stage, but it's possible that the way Flexbox is inherited to child elements could be the cause. If we had an HTML / CSS compile of the actual scale itself it would be beneficial because I or others could then use the inspector to see what's really going on with the way the tooltip ends up positioning itself.

Ben2pop Over a year ago

In the inspect I got rid of the flex .. but it does not change .. what is weired is that when I put the inspect .. the tooltip is moving and is not attached to any container .. there is no way to attach it ?

Ben2pop Over a year ago

there is no way to change container: 'body' to the desired div ?

|

Collectives™ on Stack Overflow

Bootstrap Tooltip not working using JS

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related