2016-09-28 3 views
1

Так что на моей странице у меня есть несколько подсказок, но я бы хотел, чтобы каждый из них отличался. Как мне это сделать? Я предполагаю, что это будет возможно с помощью сложного маршрута CSS, но я надеялся на что-то более сжатое.Bootstrap - как настроить таргетинг на определенную подсказку?

HTML

<div class="row redbg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div>  
<div class="row bluebg" data-toggle="tooltip" data-placement="right" title="Lorem ipsum dolor sit amet"></div> 

JavaScript

<script> 
    $(function() { 
    $('[data-toggle="tooltip"]').tooltip() 
}) 
    </script> 

CSS (Только для красного на данный момент)

/* TOOL TIP */ 
.tooltip-inner { 
    background-color: red; 
    color: #fff; 
} 

.tooltip.top .tooltip-arrow { 
    border-top-color: red; 
} 

.tooltip.right .tooltip-arrow { 
    border-right-color: red; 
} 

.tooltip.bottom .tooltip-arrow { 
    border-bottom-color: red; 
} 

.tooltip.left .tooltip-arrow { 
    border-left-color: red; 
} 
.tooltip-inner { 
    max-width: 350px; 
    /* If max-width does not work, try using width instead */ 
    width: 350px; 
    height:75px; 

Так как woul d Я делаю div с классом redbg показать красную подсказку и как бы div с классом bluebg показать синюю подсказку?

Благодаря

+0

Done ........... – pee2pee

+0

Вы можете добавить другой класс для каждой подсказки на мероприятие 'show.bs.tooltip' – tmg

ответ

1
.redbg + .tooltip > .tooltip-inner { 
    background-color: red; 
    color: #fff; 
} 

.bluebg + .tooltip > .tooltip-inner { 
    background-color: blue; 
    color: #fff; 
} 

Я думаю, что это может добиться того, что вы ищете.

Смежные вопросы