Change css class properties with another as dynamically

I am using bootstrap css tooltip class that defined like this:

    .tooltip{display:none;color:#000;text-align:left;}
    .tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.top{margin-top:-10px;text-align:center}
    .tooltip.right{margin-left:10px} 
    ...

I want to create different version of .tooltip class. Red, Blue, Orange and others.

I want to create classes

.red-tooltip{display:none;color:red;text-align:left;}
.red-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.red-tooltip.top{margin-top:-8px;text-align:center}
.red-tooltip.top{margin-top:-7px;text-align:center}
.red-tooltip.right{margin-left:6px}

.blue-tooltip{display:none;color:blue;text-align:left;}
.blue-tooltip.in{opacity:0.9;z-index:1030;height:auto;display:block}
.blue-tooltip.top{margin-top:-18px;text-align:center}
.blue-tooltip.top{margin-top:-27px;text-align:center}
.blue-tooltip.right{margin-left:6px}

How can I dynamically change .tooltip content with .blue-tooltip

Can I do this via jquery?


Source: css

Leave a Reply