Bootstrap контроль с несколькими «data-toggle»

154

Есть ли способ назначить более одного события элементу управления начальной загрузкой через «data-toggle». Например, допустим, я хочу кнопку, у которой есть «всплывающая подсказка» и назначенный ей переключатель «кнопка».
Пробовал data-toggle = "кнопка всплывающей подсказки", но работала только подсказка.

РЕДАКТИРОВАТЬ:

Это легко "обойти" с

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
LastTribunal
источник

Ответы:

330

Если вы хотите добавить модальные и всплывающие подсказки без добавления JavaScript или изменения функции всплывающей подсказки, вы также можете просто обернуть вокруг нее элемент:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>
Роман Хольцнер
источник
6
Это на самом деле лучший подход, потому что он откладывает проблему представления на уровень представления.
LastTribunal
3
Однако есть некоторая разница: data-toggle="tooltip"внутренний элемент main (button) будет аккуратно отображаться за пределами этого элемента, тогда как он будет перекрываться с этим элементом, если установлен внутри оболочки span.
Бенджамин
1
спасибо, вот как это должно быть сделано - Нет JavaScript
Цадкан Yitbarek
Краткое, простое и умное решение. Добавление тега Span к Anchor не меняет дизайн в начальной загрузке, так что это идеальное решение для совместной работы модели и всплывающей подсказки.
Анкит Сутар
это не сработало для меня<span data-toggle="modal" data-target="#myModalForm" title="Click to edit row" data-row="0" data-cmid="425" data-id="11788" data-src="1.1.1.1" data-src_desc="null" data-dst="2.2.2.2" data-dst_desc="null" data-protocol="TCP" data-ports="80" data-remarks="none"><a class="btn btn-sm btn-info" data-toggle="tooltip" title="Click to edit row" data-original-title="Click to edit row" data-trigger="hover" href="javascript:void(0)"><i class="fa fa-pencil" aria-hidden="true"></i></a></span>
shorif2000
73

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

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

с этой разметкой:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

Обратите внимание data-tooltip.

Обновить

Или просто

$('[data-tooltip="tooltip"]').tooltip();
Melvin
источник
10
Упростил это с помощью: $ ('[data-tooltip = "tooltip"]'). Tooltip ();
Райан Керра
3
Использовал ваш обновленный ответ и был очень легок, работал отлично
The One and Only ChemistryBlob
1
Лучше, чем оборачивать хорошее решение
D3VELOPER
1
Проблема с этим (и другими решениями в этом вопросе прямо сейчас) заключается в том, что когда вы щелкаете, чтобы открыть модальное окно, а затем закрываете его, всплывающая подсказка появляется снова (или остается видимой), даже если мышь покинула кнопку. Это очень раздражает, если у вас, например, есть кнопки в таблице в каждой строке, так как они могут блокировать кнопки выше / ниже. Единственный способ скрыть это - щелкнуть где-нибудь за пределами всплывающей подсказки.
обниматься
1
Я люблю этот подход намного больше, чем принятый ответ с оберткой. Это очень просто, поскольку расширяет возможности HTML5 без чрезмерной перегрузки DOM. Также в моем случае подход с использованием обертки не сработал
Canelo Digital
11

Мне удалось решить эту проблему без необходимости изменять какую-либо разметку с помощью следующего фрагмента jQuery. У меня была похожая проблема, когда я хотел всплывающую подсказку для кнопки, которая уже использовала переключение данных для модального режима. Все, что вам нужно сделать здесь, это добавить заголовок к кнопке.

$('[data-toggle="modal"][title]').tooltip();
Джеймс Паркер
источник
9

Это лучшее решение, которое я только что реализовал:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

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

$('[rel="tooltip"]').tooltip(); 
Жак Кокемер
источник
1
Это чистейший, наименее навязчивый ответ
Smyrnian
8

Еще нет. Тем не менее, было предложено, чтобы кто-то добавил эту функцию однажды.

Следующая проблема начальной загрузки Github показывает прекрасный пример того, чего вы хотите. На этом этапе это возможно, но не без написания собственного обходного кода.

Проверьте это ... :-)

https://github.com/twitter/bootstrap/issues/7011

obrientimothya
источник
К сожалению, эта проблема (# 7011) была отклонена.
TJ Crowder
3

Я использую href для загрузки модального режима и оставляю переключатель данных для всплывающей подсказки:

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>
Шади Намроути
источник
3

Так как Bootstrap заставляет вас инициализировать всплывающие подсказки только через Javascript, я изменил data-toggle="tooltip"(так как тогда это бесполезно) class="bootstrap-tooltip"и использовал этот Javascript для инициализации моих всплывающих подсказок:

$('.bootstrap-tooltip').tooltip();

И поэтому я был свободен использовать data-toggleатрибут для чего-то другого (например data-toggle="button").

ankabot
источник
Отлично. Добавьте HTML тоже.
Web_Developer
2

Просто для дополнения @Roman Holzner ответ ...

В моем случае у меня есть кнопка, которая показывает всплывающую подсказку, и она должна оставаться отключенной до дальнейших действий. Используя его подход, модал работает, даже если кнопка отключена, потому что ее вызов находится вне кнопки - я в файле лезвия Laravel, просто чтобы прояснить это :)

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Поэтому, если вы хотите показывать модальные только когда кнопка активна, вы должны изменить порядок тегов:

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

Если вы хотите проверить это, измените атрибут с помощью кода JQuery:

$('button[name=delete]').attr('disabled', false);
Тьяго Кардосо
источник
2

Еще одно решение:

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>
Jackkobec
источник
2

Есть хорошее решение с использованием класса .stretched-link. Кнопка должна иметь класс .position-relative. Вот полный рабочий пример:

Подсказка должна быть добавлена ​​к кнопке, иначе ее положение будет неправильным.

$('[data-toggle="tooltip"]').tooltip();
/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

Якуб Муда
источник
1

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

введите описание изображения здесь

Я предлагаю использовать div вне тега и использовать «display: inline-block;»

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

введите описание изображения здесь

Virender
источник
0

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>

Ananth
источник