Главная > Или это ветерок твои губы колышет

Или это ветерок твои губы колышет


Спасибо ув-мым @Blacknife, @Geyan и @dimaua, что потратили своё время на ответ к данному вопросу. Возможно, их решения не уступают в качестве, однако решил остановить свой выбор на JQuery-плагине Tooltipster. Поставленную в вопросе задачу он решает.

Мини-обзор

  • Достоинства — широкие возможности по кастомизации, см. сайт плагина. Кроссбраузерный, не тормозит показ страницы.
  • Недостаток — на этом же офсайте напрочь отсутствуют примеры вида Код — Результат, поэтому придётся убить немного времени на освоение. Впрочем, ряд демо приведён в одной статье на русском.

Код примера

Tooltipster не выбрасывает тултипы за окно, не только когда они простейшие. В демонстрируемом примере появляются отличные друг от друга всплывающие подсказки при наведении курсора и клике на икону с персонализированным оформлением и установлено время, в течение которого будет виден тултип — http://codepen.io/Kristinita/pen/RGzVmK.

$(document).ready(function() { var $SashaElement = $('.SashaTooltip'); $SashaElement.tooltipster({ content: 'Может, это ветерок или это ветерок твои губы колышет Твои губы колышет', theme: ['tooltipster-punk-customized'], timer: 2000, side: ['bottom', 'top', 'right', 'left'] }); $SashaElement.tooltipster({ content: 'Может, это я кричу Тебе, но Ты меня не слышишь', theme: 'tooltipster-punk', trigger: 'click', multiple: true, timer: 2000, side: ['bottom', 'top', 'right', 'left'] }); }); body { background: gainsboro; margin-top: 7rem; padding-left: 7rem; }.tooltipster-sidetip.tooltipster-punk-customized.tooltipster-box { border-radius: 5px; border: none; border-bottom: 3px solid orange; background: #2a2a2a; } <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="http://ps-studio.info/katalog/tooltips/1/tooltipster.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ps-studio.info/katalog/tooltips/1/tooltipster.bundle.min.css" /> <link rel="stylesheet" type="text/css" href="http://ps-studio.info/katalog/tooltips/1/sideTip/tooltipster-sideTip-punk.min.css" /> </head> <body> <img src="http://i.imgur.com/n9nm1qM.jpg" width="500" class="SashaTooltip"> </body> </html>

Демонстрация

Sasha_Tooltipster

Что видим:

  • Если текст всплывающей подсказки не помещается в одну строку, он переносится на следующую.
  • Когда места на стороне света не остаётся, тултип появляется на другой. Отображение настраивается параметром side, в примере я задал ему значения ['bottom', 'top', 'right', 'left']. Всплывающая подсказка по умолчанию будет снизу, если там нет места — сверху; когда недостаточно пространства как снизу, так и сверху — справа; ну и наконец, если ей некуда деться снизу, сверху и справа, она выведется слева.

За время съёмок ни одна всплывающая подсказка не выскочила за границу. В ещё более усложнённых моих реальных примерах с этим тоже порядок.


Источник: https://ru.stackoverflow.com/questions/500468/%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B0%D1%8F-%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B0-%D0%BD%D0%B5-%D0%B2%D1%8B%D1%85%D0%BE%D0%B4%D1%8F%D1%89%D0%B0%D1%8F-%D0%B7%D0%B0-%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Премьера нового клипа Натальи Ионовой Согрей СПЛЕТНИК Вязание тапки квадратами


Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет



Или это ветерок твои губы колышет