jquery - por - Añadiendo una clase personalizada a la información sobre herramientas

directivas angular 4 ejemplos

Question

Quiero diseñar (css) algunas sugerencias de herramientas bootstrap-tooltip.js, sin afectar todas las informaciones sobre herramientas. He probado muchas soluciones diferentes, pero siempre termino agregando una clase al elemento que activa la información sobre herramientas.

Esto es lo que intenté:

$(function(){
  $("[id$=amount]").tooltip({
    trigger: ''manual'',
    placement: ''right''
  }).addClass("test"); // <--- This does not help me. Class just ends up 
});                    //      in the trigger element. Se html output 
                       //      from firebug below...

Pero entonces la clase simplemente termina en el elemento que activa la información sobre herramientas:

<input 
     id="list_wishes_attributes_0_amount" 
     class="test"  <!-- The class I tried to add to the tooltip ended up here. -->
     type="text" 
     tabindex="3" 
     size="30" 
     rel="tooltop" 
     name="list[wishes_attributes][0][amount]" 
     min="0" 
     data-original-title="Only numbers please"
/>

¿Cómo puedo asignar una clase personalizada para mi información sobre herramientas y no el campo de entrada que la activa?

Answer 1

Alternativa a esta respuesta que funciona en caso de que el selector devuelva muchas informaciones sobre herramientas:

$("[id$=amount]")
  .tooltip()
  .each((i, el)=> $(el).data(''bs.tooltip'').tip().addClass(''test''));

( debería estar bien para bootstrap 2 y 3 ).

Answer 2

Antes de .addClass , intente agregar .parent() hasta que obtenga el div padre. Además, siempre puedes usar los selectores de jQuery para encontrar el div que deseas y actualizar el CSS desde allí.

Answer 3

El método que utilizo es adjuntar una clase directamente al elemento a través de JQuery (funciona en Bootstrap 3). Es un poco más complicado, porque necesita encontrar el elemento oculto, generado automáticamente a través del atributo de data del padre.

$(''#[id$=amount]'')
  .tooltip()
    .data(''bs.tooltip'')
      .tip()
      .addClass(''custom-tooltip-class'');

Prefiero esto a anular la plantilla, porque es mucho más conciso y menos detallado que todo ese HTML extra.

Answer 4

He creado una pequeña extensión para el complemento Bootstrap Tooltip, que nos permite agregar clases personalizadas para información sobre herramientas usando el parámetro customClass en Javascript o mediante el atributo data-custom-class en HTML.

Uso:

• A través data-custom-class atributo data-custom-class :

data-custom-class="tooltip-custom" : crea una información sobre herramientas con la clase tooltip-custom .

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-custom-class="tooltip-custom" title="Custom tooltip example">Tooltip example</button>

• a través del parámetro customClass :

customClass: ''tooltip-custom''

$(''.my-element'').tooltip({
    customClass: ''tooltip-custom''
});

Preparar:

El código varía según la versión de Bootstrap utilizada (v3, v4-alpha o v4).

Bootstrap v4 (compatible con v4.0.0 y v4.1.0)

Javascript

;(function($) {

  if (typeof $.fn.tooltip.Constructor === ''undefined'') {
    throw new Error(''Bootstrap Tooltip must be included first!'');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  // add customClass option to Bootstrap Tooltip
  $.extend( Tooltip.Default, {
    customClass: ''''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    // invoke parent method
    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.config.customClass ) {
        var tip = this.getTipElement();
        $(tip).addClass(this.config.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
  background-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-top .arrow:before {
  border-top-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-right .arrow:before {
  border-right-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-left .arrow:before {
  border-left-color: #5b2da3;
}
.tooltip-custom.bs-tooltip-bottom .arrow:before {
  border-bottom-color: #5b2da3;
}

Hablar con descaro a

@mixin tooltip-custom($bg-color, $color: $tooltip-color) {

  .tooltip-inner {
    background-color: $bg-color;
    @if $color != $tooltip-color {
      color: $color;
    }
  }

  &.bs-tooltip-top .arrow:before {
    border-top-color: $bg-color;
  }

  &.bs-tooltip-right .arrow:before {
    border-right-color: $bg-color;
  }

  &.bs-tooltip-left .arrow:before {
    border-left-color: $bg-color;
  }

  &.bs-tooltip-bottom .arrow:before {
    border-bottom-color: $bg-color;
  }

}

Ejemplo : https://jsfiddle.net/zyfqtL9v/

Bootstrap v3.3.7

Javascript

(function ($) {

  if (typeof $.fn.tooltip.Constructor === ''undefined'') {
    throw new Error(''Bootstrap Tooltip must be included first!'');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  $.extend( Tooltip.DEFAULTS, {
    customClass: ''''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.options.customClass ) {
        var $tip = this.tip()
        $tip.addClass(this.options.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
  background-color: #5b2da3;
}
.tooltip-custom.top .tooltip-arrow {
  border-top-color: #5b2da3;
}
.tooltip-custom.right .tooltip-arrow {
  border-right-color: #5b2da3;
}
.tooltip-custom.left .tooltip-arrow {
  border-left-color: #5b2da3;
}
.tooltip-custom.bottom .tooltip-arrow {
  border-bottom-color: #5b2da3;
}

Ejemplo : https://jsfiddle.net/cunz1hzc/

Bootstrap v4.0.0-alpha.6

Javascript

;(function($) {

  if (typeof $.fn.tooltip.Constructor === ''undefined'') {
    throw new Error(''Bootstrap Tooltip must be included first!'');
  }

  var Tooltip = $.fn.tooltip.Constructor;

  // add customClass option to Bootstrap Tooltip
  $.extend( Tooltip.Default, {
      customClass: ''''
  });

  var _show = Tooltip.prototype.show;

  Tooltip.prototype.show = function () {

    // invoke parent method
    _show.apply(this,Array.prototype.slice.apply(arguments));

    if ( this.config.customClass ) {
      var tip = this.getTipElement();
      $(tip).addClass(this.config.customClass);
    }

  };

})(window.jQuery);

CSS

.tooltip-custom .tooltip-inner {
    background-color: #5b2da3;
}
.tooltip-custom.tooltip-top .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-bottom .tooltip-inner::before {
    border-top-color: #5b2da3;
}
.tooltip-custom.tooltip-right .tooltip-inner::before, 
.tooltip-custom.bs-tether-element-attached-left .tooltip-inner::before {
    border-right-color: #5b2da3;
}
.tooltip-custom.tooltip-bottom .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-top .tooltip-inner::before {
    border-bottom-color: #5b2da3;
}
.tooltip-custom.tooltip-left .tooltip-inner::before,
.tooltip-custom.bs-tether-element-attached-right .tooltip-inner::before {
    border-left-color: #5b2da3;
}

SASS mixin:

@mixin tooltip-custom($bg-color, $color: $tooltip-color) {

  .tooltip-inner {
    background-color: $bg-color;
    @if $color != $tooltip-color {
     color: $color;
  }
}

&.tooltip-top,
&.bs-tether-element-attached-bottom {
  .tooltip-inner::before {
    border-top-color: $bg-color;
  }
}

&.tooltip-right,
&.bs-tether-element-attached-left {
  .tooltip-inner::before {
    border-right-color: $bg-color;
  }
}

&.tooltip-bottom,
&.bs-tether-element-attached-top {
  .tooltip-inner::before {
    border-bottom-color: $bg-color;
  }
}

&.tooltip-left,
&.bs-tether-element-attached-right {
  .tooltip-inner::before {
    border-left-color: $bg-color;
  }
}

}

Ejemplo : https://jsfiddle.net/6dhk3f5L/

Repositorio de github:

https://github.com/andreivictor/bootstrap-tooltip-custom-class

Answer 5

Intente establecer la opción html en true e insertar algo como <span class="test">YOUR TEXT</span> en la opción de title .

$(function(){
  $("[id$=amount]").tooltip({
    trigger: ''manual'',
    placement: ''right'',
    html: true,
    title: ''<span class="test">YOUR TEXT</span>''
  });
}); 

Sinceramente, no estoy seguro de si esto funcionará, pero creo que vale la pena intentarlo.

EDITAR : Después de leer este post puede ser más útil.

Answer 6

Tal vez esto pueda ayudar a alguien así me ayudó a:

Agregue una clase personalizada a su nodo de información sobre herramientas "generado":

$(document).ready(function() {
    $(".my-class").tooltip({
        tooltipClass:"my-custom-tooltip"
    });
});

Salida de muestra como último hijo del elemento body:

<div id="ui-tooltip-1" role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content my-custom-tooltip" style="top: 295px; left: 908px; display: block;">
    <div class="ui-tooltip-content">My title contnet</div>
</div>

Aplicado a esta lógica de preguntas:

$(function(){
  $("[id$=amount]").tooltip({
    trigger: ''manual'',
    placement: ''right''
    tooltipClass:''test''
  })
}); 

Probado utilizando jQuery UI - v1.10.3

Answer 7

$().tooltip({
  template: ''<div class="tooltip CUSTOM-CLASS"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>''
})