buttons - radio button group bootstrap




Control Bootstrap con múltiples "alternar datos" (6)

¿Hay alguna manera de asignar más de un evento a un control de arranque a través de "datos-alternar". Por ejemplo, digamos que quiero un botón que tenga un "tooltip" y un "botón" alternar asignado a él.
Intentó data-toggle = "botón de información sobre herramientas", pero solo la información sobre herramientas funcionó.

EDITAR:

Esto es fácil de "solucionar" con

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Aún no. Sin embargo, se ha sugerido que alguien agregue esta característica un día.

El siguiente problema bootstrap de Github muestra un ejemplo perfecto de lo que estás deseando. Es posible, pero no sin escribir su propio código de solución en esta etapa.

Echale un vistazo... :-)

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


Como Bootstrap te obliga a inicializar la información sobre herramientas solo a través de Javascript, cambié de data-toggle="tooltip" (ya que es inútil entonces) a class="bootstrap-tooltip" y usé este Javascript para inicializar mi información sobre herramientas:

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

Y así fui libre de usar el atributo de data-toggle para otra cosa (por ejemplo, data-toggle="button" ).


Cuando abres modal en una etiqueta y quieres mostrar la información sobre herramientas, y si implementas tooltip inside tag, se mostrará la etiqueta emergente tooltip cercana. Me gusta esto

Sugeriré que use div fuera de una etiqueta y use "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>


Esta es la mejor solución que acabo de implementar:

HTML

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

JAVASCRIPT que de todos modos debe incluir, independientemente del método que use.

$('[rel="tooltip"]').tooltip(); 

Si desea agregar un modal y una información sobre herramientas sin agregar javascript ni alterar la función de información sobre herramientas, también puede simplemente envolver un elemento alrededor de él:

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>

Solo para complementar la respuesta de @Roman Holzner ...

En mi caso, tengo un botón que muestra la información sobre herramientas y debe permanecer desactivado hasta más acciones. Usando su enfoque, el modal funciona incluso si el botón está desactivado, porque su llamada está fuera del botón: estoy en un archivo blade Laravel, solo para ser claro :)

<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>

Por lo tanto, si desea mostrar el modal solo cuando el botón está activo, debe cambiar el orden de las etiquetas:

<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>

Si desea probarlo, cambie el atributo con un código JQuery:

$('button[name=delete]').attr('disabled', false);




binding