Всплывающие подсказки начальной загрузки не работают - PullRequest
Новая
       1

Всплывающие подсказки начальной загрузки не работают

241 голосов
/ 25 февраля 2012

Я схожу с ума здесь.

У меня есть следующий HTML: 

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

И подсказка в стиле Bootstrap отказывается отображаться, просто обычная подсказка.

У меня bootstrap.css работает отлично, и я вижу там классы

У меня есть все соответствующие файлы JS в конце моего HTML-файла: 

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

Я посмотрел на источник примера Bootstrap и не вижу ничего, что инициирует всплывающую подсказку где-либо там.Так что я предполагаю, что это должно просто сработать, или я здесь что-то упускаю?

У меня есть модалы, оповещения и другие вещи, которые работают просто отлично, поэтому я не полный дебил;)

Спасибо за любую помощь!

Ответы [ 24 ]

1 голос
/ 30 мая 2012

Поместите свой код в готовый документ 

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

В моем случае я также пропустил классы css всплывающей подсказки на http://twitter.github.com/bootstrap/assets/css/bootstrap.css, так что не забывайте об этом.

0 голосов
/ 16 июля 2017

Вам нужно сделать следующее.Добавьте код 

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

где-нибудь на своей странице (желательно в разделе <head>).

Также добавьте data-toggle: "tooltip" ко всему, что вы хотите включить с ним.

0 голосов
/ 30 сентября 2017

Добавьте data-toggle="tooltip" к любым элементам с помощью всплывающей подсказки.

0 голосов
/ 13 мая 2017

Быстрая и легкая альтернатива плагину Bootstrap:

HTML: 

<div>
    <div class="mytooltip" id="pwdLabel">
        <label class="control-label" for="password">Password</label>

        <div class="mytooltiptext" id="pwdLabel_tttext">
            6 characters long, must include letters and numbers
        </div>                                

    </div>

    <input type="password" name="password" value="" id="password" autocomplete="off"
           class="form-control" 
           style="width:125px" />
</div>

CSS: 

<style>
    .mytooltiptext {
        position: absolute;
        left: 0px;
        top: -45px;
        background-color: black;
        color: white;
        border: 1px dashed silver;
        padding:3px;
        font-size: small;
        text-align: center;
    }

    .mytooltip {
        position: relative;
    }

    .mytooltip label {
        border-bottom: 1px dashed black !important;
    }
</style>

JSCRIPT: 

$(".mytooltip").mouseover(function(){
    var elm = this.id;
    $("#" + elm + "_tttext").fadeIn("slow");
});

var ttTmo;
$(".mytooltip").mouseout(function(){
    var elm = this.id;
    clearTimeout(ttTmo);
    ttTmo = setTimeout(function(){
        $("#" + elm + "_tttext").fadeOut("slow");
    },3000);
});

Метка / текст должен быть заключен в оболочку класса "mytooltip". Эта оболочка должна иметь идентификатор.

После метки есть текст всплывающей подсказки, заключенный в div класса «mytooltiptext» и идентификатор, состоящий из идентификатора родительской оболочки + «_tttext». Могут быть использованы другие опции для селекторов.

Надеюсь, это поможет.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...