Перейти к содержанию

Рекомендуемые сообщения

Приветствую.

Подскажите как бутстраповский тултип сделать постоянно видимым?

Вот есть некая кнопка

<button id="btn-send" type="button" data-toggle="tooltip" data-original-title="Я тултип";>Я кнопка</button>

Вот выдержка с бутсраповского мануала

Спойлер
trigger string 'hover focus'

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.

'manual' indicates that the tooltip will be triggered programmatically via the .tooltip('show'), .tooltip('hide') and .tooltip('toggle') methods; this value cannot be combined with any other trigger.

'hover' on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.

Очевидно мне нужно .tooltip('show') но какой синтаксис в данном случае? Как его вставить через data у меня как то не вышло.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

тултип не для того, чтобы быть постоянно видимым - это противоречит самой идеологии элемента.

Для решения вашей задачи, можно использовать вот:

baloon tip

 

но проще всего, отрисовать блоками отдельными и не заморачиваться.

Изменено пользователем anboza
  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вообще не понял, что это и зачем мне его внедрять если все уже есть внутри опенкарта.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
 
$('[data-toggle="tooltip"]').tooltip('show')

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, chukcha сказал:
 

$('[data-toggle="tooltip"]').tooltip('show')

а есть возможность вот именно сюда вставить код <button id="btn-send" type="button" data-toggle="tooltip" data-original-title="Я тултип";>Я кнопка</button>

типа data-tooltip=show? 

Я ведь не вставлю скрипт в button. Кроме того нужно показывать именно тултип с батона, а на страничке есть и другие.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
34 минуты назад, AndreyIvanov сказал:

что это и зачем мне его внедрять если все уже есть внутри опенкарта.

это пытаться скрестить ужа с ежом. Киянка, тоже молоток, только столярный.

 

по сути правильным, будет 2 варианта:

1. отрисовать просто дивами сторонними все подсказки.

2. использовать библиотеку, которая рисует их (подсказки) и выводит/обрабатывает отдельно или пакетно. Собственно такую библиотеку, я вам и скинул.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Каким образом ваши два варианта, когда нужно добавлять еще лишний код становятся правильными если весь код УЖЕ добавлен. Вопрос лишь в синтаксисе команды для отображения.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
$('#btn-send').attr('data-toggle', 'tooltip').attr('data-placement', 'right').tooltip({trigger: 'manual'}).tooltip('show');
<button id="btn-send" type="button" data-original-title="Я тултип";>Я кнопка</button>

Попробуйте так

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, AndreyIvanov сказал:

а есть возможность вот именно сюда вставить код <button id="btn-send" type="button" data-toggle="tooltip" data-original-title="Я тултип";>Я кнопка</button>

типа data-tooltip=show? 

Я ведь не вставлю скрипт в button. Кроме того нужно показывать именно тултип с батона, а на страничке есть и другие.

Это ДжимКери скрипт, его вставляют либо в коммон.js (предпочтительно), либо вниз тпл внутри тегов <скрипт>.

Если нужен именно батон и только батон, то надо трошки подправить селектор.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
42 минуты назад, Gaziz сказал:

$('#btn-send').attr('data-toggle', 'tooltip').attr('data-placement', 'right').tooltip({trigger: 'manual'}).tooltip('show');

<button id="btn-send" type="button" data-original-title="Я тултип";>Я кнопка</button>

Попробуйте так

Ваш вариант работает. Но можно ли обойтись без скрипта вообще? Через data?

37 минут назад, florapraktik сказал:

Это ДжимКери скрипт, его вставляют либо в коммон.js (предпочтительно), либо вниз тпл внутри тегов <скрипт>.

Если нужен именно батон и только батон, то надо трошки подправить селектор.

Подскажите как? А почему он Джим Кери? =)

Изменено пользователем AndreyIvanov

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 минут назад, AndreyIvanov сказал:

Ваш вариант работает. Но можно ли обойтись без скрипта вообще? Через data?

Дайте уникальный class или id кнопкам, которым надо tooltip сделать видимым и все. Например:

<button id="btn-send" class="btn-showtip" type="button" data-toggle="tooltip" data-placement="right" data-trigger="manual" data-original-title="Я тултип";>Я кнопка</button>
$('.btn-showtip').tooltip('show');

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 минут назад, AndreyIvanov сказал:

А почему он Джим Кери? =)

jQuery =) Я предположил это на основании наличия значка $.

Знаете, честно говоря, наверное всё-таки не то Вы делаете. Тултип, это всплывающая подсказка. Есть люди, которые привыкли видеть это при наведении мыши, а не просто так. Они будут немного сбиты с толку и несколько обескуражены. Не фен шуй с точки зрения юзабилити. Всплывающие подсказки должны всплывать, а не висеть без видимых причин.

Вам правильно подсказали - реализуйте свою идею вёрсткой. и сделайте это такой вёрсткой, которая НЕ будет похожа на тултип.

Впрочем, я бы поставил на то, что Вам надо искать вообще другое решение. По описанию сильно похоже на какой-то костыль. А ведь это фронт! Обязательно будет много людей, которые всё поймут совсем неправильно. Не усложняйте страницу.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
11 минут назад, Gaziz сказал:

Дайте уникальный class или id кнопкам, которым надо tooltip сделать видимым и все. Например:

Вы мне объясните, такой тригер в принципе не делается без скрипта?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, florapraktik сказал:

Знаете, честно говоря, наверное всё-таки не то Вы делаете. Тултип, это всплывающая подсказка. Есть люди, которые привыкли видеть это при наведении мыши, а не просто так. Они будут немного сбиты с толку и несколько обескуражены. Не фен шуй с точки зрения юзабилити. Всплывающие подсказки должны всплывать, а не висеть без видимых причин.

Вам правильно подсказали - реализуйте свою идею вёрсткой. и сделайте это такой вёрсткой, которая НЕ будет похожа на тултип.

Впрочем, я бы поставил на то, что Вам надо искать вообще другое решение. По описанию сильно похоже на какой-то костыль. А ведь это фронт! Обязательно будет много людей, которые всё поймут совсем неправильно. Не усложняйте страницу.

На очень маленьком телефоне описание кнопки никак не влазит, только иконка. Ну никак оно не влазит и все =) Естественно, что это за кнопка никто не поймет. Тултип полупрозрачный и очень маленький вот именно для такого случая хорошо зайдет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
8 минут назад, AndreyIvanov сказал:

Вы мне объясните, такой тригер в принципе не делается без скрипта?

в бутстрап не делается

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, AndreyIvanov сказал:

На очень маленьком телефоне описание кнопки никак не влазит, только иконка. Ну никак оно не влазит и все =) Естественно, что это за кнопка никто не поймет. Тултип полупрозрачный и очень маленький вот именно для такого случая хорошо зайдет.

Вы собрались вешать всплывший тултип на ВСЕХ разрешениях только потому, что не смогли придумать, как описать кнопку на очень маленьких телефонах?

ИМХО, это как-то неправильно. Совсем.

Сформулируйте изначальную задачу - толку будет больше, кмк.

 

ПС Я бы, наверное, ограничился иконкой для маленьких телефонов. Либо, сделал на этих разрешениях кнопу больше.

Изменено пользователем florapraktik

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, florapraktik сказал:

Вы собрались вешать всплывший тултип на ВСЕХ разрешениях только потому, что не смогли придумать, как описать кнопку на очень маленьких телефонах?

ИМХО, это как-то неправильно. Совсем.

Сформулируйте изначальную задачу - толку будет больше, кмк.

Я не буду вешать на всех экранах, только на том где не влазит.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, AndreyIvanov сказал:

Я не буду вешать на всех экранах, только на том где не влазит.

Как? Так, как предложено сейчас, оно вылезет везде.

Это будет следующий вопрос, да?:)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Если там есть место для всплывшего тултипа, может можно просто увеличить размер кнопки для этих разрешений?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 минут назад, florapraktik сказал:

Как? Так, как предложено сейчас, оно вылезет везде.

Это будет следующий вопрос, да?

Я немного знаком с версткой в отличии от js, не вылезет =)

Но, про следующий вопрос было смешно.:-D

Изменено пользователем AndreyIvanov

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Уважаемые, а подскажите тот самый тригер click в библиотеке бутсрапа он равен тачу на планшетах и мобилках?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.