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

Question

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

主要目的是使弹出窗口的工具提示 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>

Answer 1

您只需要针对Tooltip 2 再添加一个类:

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

并在 .bondTenTooltip 之后移动 .bondTen 类声明

Updated fiddle

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

编辑 已修复以在 chrome 中工作。 Fiddle