jquery - 工具提示添加第二种样式

我的页面上有2个工具提示，我目前正在使用下面的代码，但是我想以某种方式添加第二个“ rel =”，所以我不必重复所有的jQuery，计划是在工具提示中添加一个div如代码中所示的id和一个带有tooltip2额外类的代码，以便样式可以不同。我已经对此进行了很多摆弄，只是无法弄清楚如何在其中获得单独的课程。

主要目的是使工具提示2变成黑色，并带有白色文本作为弹出窗口。

我也为此做了一个jsfiddle：http://jsfiddle.net/XJZ9v/

jQuery的：

  $( document ).ready( function()
  {
     var targets = $( '[rel~=tooltip]' ),
         target  = false,
         tooltip = false,
         title   = false;

     targets.bind( 'mouseenter', function()
     {
         target  = $( this );
         tip     = target.attr( 'title' );
         tooltip = $( '<div id="tooltip"></div>' );

         if( !tip || tip == '' )
             return false;

         target.removeAttr( 'title' );
         tooltip.css( 'opacity', 0 )
                .html( tip )
                .appendTo( 'body' );

         var init_tooltip = function()
         {
             if( $( window ).width() < tooltip.outerWidth() * 1.5 )
            tooltip.css( 'max-width', $( window ).width() / 2 );
             else
                 tooltip.css( 'max-width', 340 );

             var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
                 pos_top  = target.offset().top - tooltip.outerHeight() - 20;

             if( pos_left < 0 )
             {
                 pos_left = target.offset().left + target.outerWidth() / 2 - 20;
                 tooltip.addClass( 'left' );
             }
             else
                 tooltip.removeClass( 'left' );

             if( pos_left + tooltip.outerWidth() > $( window ).width() )
             {
                 pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
                 tooltip.addClass( 'right' );
             }
             else
                 tooltip.removeClass( 'right' );

             if( pos_top < 0 )
             {
                 var pos_top  = target.offset().top + target.outerHeight();
                 tooltip.addClass( 'top' );
             }
             else
                 tooltip.removeClass( 'top' );

             tooltip.css( { left: pos_left, top: pos_top } )
                    .animate( { top: '+=10', opacity: 1 }, 50 );
         };

         init_tooltip();
         $( window ).resize( init_tooltip );

         var remove_tooltip = function()
         {
             tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
             {
                 $( this ).remove();
             });

             target.attr( 'title', tip );
         };

         target.bind( 'mouseleave', remove_tooltip );
         tooltip.bind( 'click', remove_tooltip );
     });
 });

CSS：

 .infoToolTip{
background-color: #D7DF23;
display: inline-block;
height: 18px;
width: 18px;
color: #000;
line-height: 28px;
font-size: 28px;
padding: 2px 5px 8px 5px;
text-align: center;
position: relative;
font-family: 'IM Fell English', serif;
font-style: italic;
margin: -5px 0 -5px 5px;
font-weight: normal;
cursor: default;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
z-index: 1;
text-decoration: none;
 }


 .bondTen
 {
     text-align: center;
     color: #FFFFFF;
     background: #000000;

 }

 .bondTen:after /* triangle decoration */
 {
    border-top: 10px solid #000000;
}

 #tooltip
 {
    text-align: center;
    color: #000000;
     background: #D7DF23;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.4);
     position: absolute;
     z-index: 100;
     padding: 15px;
 }

#tooltip:after /* triangle decoration */
{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #D7DF23;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
  }

    #tooltip.top:after
    {
        border-top-color: transparent;
        border-bottom: 10px solid #D7DF23;
        top: -20px;
        bottom: auto;
    }

    #tooltip.left:after
    {
        left: 10px;
        margin: 0;
    }

    #tooltip.right:after
    {
        right: 10px;
        left: auto;
        margin: 0;
    }

    .bondTenTooltip{
        float: none !important;
        font-family: 'ChevinProDemiBold';
        font-size: 22px;
        padding: 0 5px 10px;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
        background-color: #FFF;
        display: inline-block;
        height: 18px;
        width: 18px;
        color: #666;
        line-height: 28px;
        text-align: center;
        position: relative;
        font-style: normal;
        margin: -5px 0 -5px 25px;
        font-weight: normal;
        cursor: default;
        -webkit-border-radius: 14px;
        -moz-border-radius: 14px;
        border-radius: 14px;
        z-index: 1;
    }

HTML：

  <abbr title="Tooltip 1" class="bondTenTooltip" rel="tooltip">1</abbr>

  <abbr title="Tooltip 2" class="bondTenTooltip" rel="tooltip">2</abbr>

最佳答案

您只需要添加一个已经针对Tooltip 2的类：

 <abbr title="Tooltip 2" class="bondTenTooltip bondTen" rel="tooltip">2</abbr>

并将.bondTen类声明移到.bondTenTooltip之后

Updated fiddle

另外，如果您想更改工具提示本身，请查看here

编辑固定以在chrome中工作。 Fiddle

关于jquery - 工具提示添加第二种样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16357739/