javascript - enable - tooltip bootstrap css
¿Cómo habilitar la información sobre herramientas de arranque en el botón desactivado? (13)
Aquí hay un código de trabajo: http://jsfiddle.net/mihaifm/W7XNU/200/
$(''body'').tooltip({
selector: ''[rel="tooltip"]''
});
$(".btn").click(function(e) {
if (! $(this).hasClass("disabled"))
{
$(".disabled").removeClass("disabled").attr("rel", null);
$(this).addClass("disabled").attr("rel", "tooltip");
}
});
La idea es agregar la información sobre herramientas a un elemento primario con la opción del selector , y luego agregar / eliminar el atributo rel al habilitar / deshabilitar el botón.
Necesito mostrar una información sobre herramientas en el botón desactivado y quitarlo en el botón habilitado. En realidad, funciona de manera inversa.
¿Cuál es la mejor forma de invertir este comportamiento?
$(''[rel=tooltip]'').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
Aquí está la demostración: http://jsfiddle.net/BA4zM/68/
PD: quiero mantener el atributo deshabilitado.
Código de trabajo para Bootstrap 3.3.6
Javascript:
$(''body'').tooltip({
selector: ''[data-toggle="tooltip"]''
});
$(".btn").click(function(e) {
if ($(this).hasClass("disabled")){
e.preventDefault();
}
});
CSS:
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: auto;
}
En mi caso, ninguna de las soluciones anteriores funcionó. Descubrí que es más fácil superponer el botón desactivado usando un elemento absoluto como:
<div rel="tooltip" title="I workz" class="wrap">
<div class="overlap"></div>
<button>I workz</button>
</div>
<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
<div class="overlap"></div>
<button disabled>I workz disabled</button>
</div>
.wrap {
display: inline-block;
position: relative;
}
.overlap {
display: none
}
.poptooltip .overlap {
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 1000;
}
Estas soluciones temporales son feas. He depurado el problema es que bootstrap establece automáticamente los eventos de puntero de la propiedad CSS : ninguno en los elementos desactivados.
Esta propiedad mágica hace que JS no pueda manejar ningún evento en elementos que coincidan con el selector de CSS.
Si sobreescribe esta propiedad a la predeterminada, todo funciona como un amuleto, ¡incluida la información sobre herramientas!
.disabled {
pointer-events: all !important;
}
Sin embargo, no debe usar el selector general, ya que probablemente deba detener manualmente la propagación de eventos de JavaScript, tal como lo conoce ( e.preventDefault () ).
Esto es lo que yo y tekromancr se nos ocurrió.
Elemento de ejemplo:
<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I''m a tooltip">Press Me</a>
nota: los atributos de información sobre herramientas se pueden agregar a un div por separado, en el que se debe usar el id de ese div al llamar .tooltip (''destroy''); o .tooltip ();
esto habilita la información sobre herramientas, colóquela en cualquier javascript que esté incluido en el archivo html. Sin embargo, es posible que esta línea no sea necesaria para agregar. (Si la información sobre herramientas muestra sin esta línea, entonces no se moleste en incluirla)
$("#element_id").tooltip();
destruye información sobre herramientas, ver a continuación para el uso.
$("#element_id").tooltip(''destroy'');
evita que se pueda hacer clic en el botón. Debido a que el atributo deshabilitado no se está utilizando, esto es necesario, de lo contrario, se podría hacer clic en el botón aunque se "vea" como si estuviera deshabilitado.
$("#element_id").click(
function(evt){
if ($(this).hasClass("btn-disabled")) {
evt.preventDefault();
return false;
}
});
Usando bootstrap, las clases btn y btn-disabled están disponibles para usted. Anule estos en su propio archivo .css. puede agregar cualquier color o lo que quiera que se vea el botón cuando esté desactivado. Asegúrate de mantener el cursor: predeterminado; también puede cambiar cómo se ve .btn.btn-success.
.btn.btn-disabled{
cursor: default;
}
agregue el siguiente código a lo que javascript esté controlando que el botón esté habilitado.
$("#element_id").removeClass(''btn-disabled'');
$("#element_id").addClass(''btn-success'');
$(''#element_id).tooltip(''destroy'');
La información sobre herramientas solo debería mostrarse ahora cuando el botón está desactivado.
si está usando angularjs también tengo una solución para eso, si lo desea.
Esto se puede hacer a través de CSS. La propiedad "eventos de puntero" es lo que impide que aparezca la información sobre herramientas. Puede obtener botones desactivados para mostrar la información sobre herramientas anulando la propiedad "eventos de puntero" configurada por bootstrap.
.btn.disabled {
pointer-events: auto;
}
No puede hacer que la información sobre herramientas aparezca en un botón deshabilitado. Esto se debe a que los elementos desactivados no desencadenan ningún evento, incluido el tool-tip. Su mejor opción sería falsificar el botón que está deshabilitado (por lo que se ve y actúa como deshabilitado), por lo que puede activar la información sobre herramientas.
P.ej. Javascript:
$(''[rel=tooltip].disabled'').tooltip();
$(''[rel=tooltip].disabled'').bind(''click'', function(){
return false;
});
En lugar de solo $(''[rel=tooltip]'').tooltip();
HTML:
<hr>
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>
JSFiddle: http://jsfiddle.net/BA4zM/75/
Prueba este ejemplo:
La información sobre herramientas debe inicializarse con jQuery : seleccione el elemento especificado y llame al método tooltip() en JavaScript :
$(document).ready(function () {
$(''[data-toggle="tooltip"]'').tooltip();
});
Agregar CSS :
.tool-tip {
display: inline-block;
}
.tool-tip [disabled] {
pointer-events: none;
}
Y tu html:
<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
<button disabled="disabled">I am disabled</button>
</span>
Puede ajustar el botón desactivado y colocar la información sobre herramientas en el contenedor:
<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
<button class="btn btn-default" disabled>button disabled</button>
</div>
Si el contenedor tiene display:inline , la información sobre herramientas no parece funcionar. Uso de la display:block y display:inline-block parece funcionar bien. También parece funcionar bien con una envoltura flotante.
ACTUALIZAR Aquí hay un JSFiddle actualizado que funciona con el último Bootstrap (3.3.6). Gracias a @JohnLehmann por sugerir pointer-events: none; para el botón desactivado.
Puedes imitar el efecto usando CSS3.
Simplemente quite el estado de desactivación del botón y la información sobre herramientas ya no aparecerá. Esto es excelente para la validación ya que el código requiere menos lógica.
Escribí esta pluma para ilustrar.
[disabled] {
&[disabled-tooltip] {
cursor:not-allowed;
position: relative;
&:hover {
&:before {
content:'''';
border:5px solid transparent;
border-top:5px solid black;
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -5px));
}
&:after {
content: attr(disabled-tooltip);
position: absolute;
left: 50%;
transform: translate(-50%, calc(-100% + -15px));
width:280px;
background-color:black;
color:white;
border-radius:5px;
padding:8px 12px;
white-space:normal;
line-height:1;
}
}
}
}
<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>
Si estás desesperado (como yo lo estaba) por los tooltips en casillas de verificación, cuadros de texto y similares, esta es mi solución alternativa de Hackey:
$(''input:disabled, button:disabled'').after(function (e) {
d = $("<div>");
i = $(this);
d.css({
height: i.outerHeight(),
width: i.outerWidth(),
position: "absolute",
})
d.css(i.offset());
d.attr("title", i.attr("title"));
d.tooltip();
return d;
});
Ejemplos de trabajo: http://jsfiddle.net/WB6bM/11/
Por lo que vale, creo que la información sobre herramientas en elementos de formularios desactivados es muy importante para el UX. Si impide que alguien haga algo, debe decirles por qué.
Simplemente puede anular el estilo "eventos de puntero" de Bootstrap para botones desactivados a través de CSS, por ejemplo
.btn[disabled] {
pointer-events: all !important;
}
Mejor aún ser explícito y desactivar botones específicos, por ejemplo
#buttonId[disabled] {
pointer-events: all !important;
}
pointer-events: auto; no funciona en un <input type="text" /> .
Tomé un enfoque diferente. No desactivo el campo de entrada, pero lo hago actuar como deshabilitado a través de css y javascript.
Como el campo de entrada no está desactivado, la información sobre herramientas se muestra correctamente. Fue en mi caso mucho más simple que agregar un contenedor en caso de que el campo de entrada estuviera deshabilitado.
$(document).ready(function () {
$(''.disabled[data-toggle="tooltip"]'').tooltip();
$(''.disabled'').mousedown(function(event){
event.stopImmediatePropagation();
return false;
});
});
input[type=text].disabled{
cursor: default;
margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">