Estoy usando el widget de información sobre herramientas jQuery UI
<li> <div class="i1"> <a href="#inf-1"title="ΕΝΤΟΠΙΣΜΟΣ"> <span class="ui-icon ui-icon-search"></span> </a> </div> </li> <li><a href="#inf-2"title="ΠΛΗΡΟΦΟΡΙΕΣ"><span class="ui-icon ui-icon-info"></span></a></li> <li><a href="#inf-3"title="ΕΠΙΠΕΔΑ"><span class="ui-icon ui-icon-copy"></span></a></li>y escribí el siguiente CSS basado en su ejemplo y funciona de maravilla:
.tooltip { display:none; background: black; font-size:12px; height:10px; width:80px; padding:10px; color:#fff; z-index: 99; bottom: 10px; border: 2px solid white; /* for IE */ filter:alpha(opacity=80); /* CSS3 standard */ opacity:0.8; }
Pero obtuve 3-4 información sobre herramientas que quiero que se vean diferentes (como el ejemplo html anterior), así que las envolví dentro de una clase e hice esto:
.i1 .tooltip { display:none; background: red; font-size:12px; height:40px; width:80px; padding:20px; color:#fff; z-index: 99; bottom: 10px; left: 50px important!; border: 2px solid white; /* for IE */ filter:alpha(opacity=80); /* CSS3 standard */ opacity:0.8; }que no hace absolutamente nada. ¿Cómo puedo anular el .tooltip genérico para personalizar ciertos tooltips de manera diferente?
Gracias por adelantado
Para aquellos que buscan aplicar una clase personalizada al nuevo widget de información sobre herramientas (jQuery UI 1.9.1), parece que extraClass ya no funciona, pero hay una nueva opción llamada tooltipClass.
$('.selector').tooltip({ tooltipClass: "your_class-Name", }); Para abordar posibles conflictos con el css de jQuery, es posible que deba agregar !important al final de las líneas en su css. Gracias a @sisharp por señalarlo :-)
Tratando de construir sobre la excelente respuesta anterior, estaba tratando de diseñar la burbuja y deshacerme de la anterior ...
Si eres novato como yo (en otros, la tarea simple toma horas), es bueno tener la respuesta al mismo tiempo en el mismo lugar :) Aquí está la solución de un par de fuentes, incluida esta pregunta:
<a href="#" title="We are trying hard" class="mytooltip"><span title="">BETA</scan></a>El lapso elimina la burbuja del navegador.
El CSS para la nueva burbuja como ejemplo:
.mytooltip:hover:after{ background: #333; background: rgba(0,0,0,.9); border-radius: 5px; bottom: 26px; color: rgb(255, 77, 85); content: attr(title); right: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: 220px;} .mytooltip:hover:before{ border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; right: 50%; position: absolute; z-index: 99; } .mytooltip { radius: 4px !important; background-color: black; color: rgb(255, 77, 85) !important; padding: 5px 20px; border-radius: 20px; margin: 50px; text-align: center; font: bold 14px ; font-stretch: condensed; text-decoration: none; box-shadow: 0 0 10px black; }Y el script mencionado anteriormente, insertado en el pie de página:
<script> $('.selector').tooltip({ tooltipClass: "mytooltip", }); </script>Gracias a esta pregunta, esto y me olvidé de la otra fuente.