JQuery: не могу заставить плагин всплывающей подсказки работать - PullRequest
Новая
       31

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

0 голосов
/ 14 мая 2010

Я пытаюсь использовать этот плагин всплывающей подсказки: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/. Не могу заставить его работать. 

<head>
    <script type="text/javascript" src="/static/JQuery.js"></script>
    <script type="text/javascript" src="/static/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="/static/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.delegate.js"></script>
    <script type="text/javascript" src="/static/js-lib/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/static/jquery.tooltip.js"></script>
    <script type="text/javascript" src="/static/sprintf.js"></script>
    <script type="text/javascript" src="/static/clientside.js"></script>
</head>

Я попробую это на простом примере:

clientside.js 

$(document).ready(function () {

    $("#set1 *").tooltip();
});

Целевой html: 

   <div id="set1">
                <p id="welcome">Welcome. What is your email?</p>
                <form id="form-username-form" action="api/user_of_email" method="get">
                    <p>
                    <label for="form-username">Email:</label>
                    <input type="text" name="email" id="form-username" />
                    <input type="submit" value="Submit" id="form-submit" />
                    </p>
                </form>
                <p id="msg-user-accepted"></p>
            </div>

К сожалению, ничего не происходит. Что я делаю не так?

1 Ответ

1 голос
/ 14 мая 2010

Вам нужен атрибут title для ваших элементов, чтобы получить всплывающую подсказку, например: 

<input type="text" name="email" id="form-username" title="My Tooltip" />

Вы можете увидеть демо здесь

Также убедитесь, что вы включаете файл CSS или используете свой собственный CSS для стилизации всплывающей подсказки. По умолчанию в плагине всплывающей подсказки есть таблица стилей: 

#tooltip {
    position: absolute;
    z-index: 3000;
    border: 1px solid #111;
    background-color: #eee;
    padding: 5px;
    opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
...