Bootstrap Tooltip funktioniert nicht mit JS

Ich versuche, die Bootstrap-Tooltipp funktioniert in meiner App, aber nichts scheint zu funktionieren .. und es macht mich irgendwie verrückt ... Ich kann den Tooltip sehen, aber es sieht nicht wie es sollte .. die Animationen nicht funktioniert das Styling funktioniert nicht .. und ich weiß nicht, wie man es beheben kann ..Bootstrap Tooltip funktioniert nicht mit JS

Ich arbeite eine Skala von 1-100% auf Javascript .. und wenn ein Benutzer es zeigt den Prozentsatz auf einen der Skala Schritt schweben - Werfen sie einen Blick auf das Foto

hier ist mein 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 meiner 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>

und das ist, wie es aussehen sollte:

bearbeitet 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; 
}

Quelle

2017-12-14 Ben2pop

Ihr JavaScript erstellt die entsprechenden Tooltip Komponenten außerhalb des DOM, was bedeutet, dass Ihre Initialisierung, wie es jetzt ist ($(function() { } oder $(document).ready()) nicht jene Elemente beeinflussen.

Dies ist ein sehr häufiges Problem mit irgendetwas, das über AJAX oder anderweitig außerhalb des DOM eingefügt wird, und erfordert eine geringfügige Variation, wie der Selektor initialisiert wird.

Im Hinblick auf Bootstrap könnte eine Option für die Tooltip-Komponente sein:

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

In dem obigen Code zu einem vorhandenen Elemente Sie die Komponente initialisiert wird (<body>) und den Wähler zu erklären, die tatsächlich auslösen würde, die Tooltip zum Erscheinen. Dies wirkt sich auf beliebige Element in Ihrem <body> unabhängig davon aus, ob es Teil des ursprünglichen HTML-DOM war oder nicht.

Hinweis: Im obigen Beispiel gebe ich den container an, den Sie möglicherweise nicht finden. Sie können mehr über diese bestimmte Option lesen (und andere) hier:

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

Quelle

2017-12-14 18:39:46

Thx Sie Robert, jetzt ist Popper arbeiten .... aber mein Tooltip in meinem Fenster schwebt (Sie können in meinem aktualisierten Beitrag sehen) Wie kann ich es an den Container anschließen

?? Bitte – Ben2pop

Schwierig zu beantworten, da wir nicht sehen, dass das CSS auf '' angewendet wird. Zahlen ... Wenn ich eine Schätzung riskieren müsste, würde ich davon ausgehen, dass es Probleme gibt, die sich auf die Einstellungen "Höhe" und "Position" beziehen. –

Ich habe dir die CSS hinzugefügt .. – Ben2pop

Bootstrap Tooltip funktioniert nicht mit JS

Antwort

Verwandte Themen