引導工具提示，風格各異

我有提示使用數據觸發像顯示，引導工具提示，風格各異

<i class="fa fa-fire fa-lg" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>

我已經在這裏使用的樣式提示，

.tooltip > .tooltip-inner { 

padding: 15px; 
font-size: 120%; 
background-color: #FFEB6C; 
color: #374D40;}

我想在不同的地方提示看起來不同於背景顏色。即我想多次查看工具提示。但我不明白我可以如何爲每個工具提示設置自定義工具提示樣式。我不能爲每個工具提示設置一個css類，因爲沒有這樣的元素，我通過數據切換設置工具提示。

有什麼辦法可以使這項工作？謝謝。

來源

2017-05-04 PeeBee

這已經被問過。你不能用官方插件來做，但如果你想編輯源代碼，就不難做到。 –

http://jsfiddle.net/technotarek/2htZe/ –

你不能用默認的引導工具提示來做到這一點。然而，這是可能的這個工具提示 - http://iamceege.github.io/tooltipster/ –

試試這個

<i id="my-tooltip-1" class="fa fa-fire fa-lg" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i> 

<style> 
#my-tooltip-1 + .tooltip > .tooltip-inner { 
     padding: 15px; 
     font-size: 120%; 
     background-color: #FFEB6C; 
     color: #374D40; 

     /* do something */ 
} 
#my-tooltip-1 + .tooltip > .tooltip-arrow { 
     background-color: #FFEB6C; 

     /* do something */ 
} 
</style>

來源

2017-05-04 04:43:00

簡單，我創建了一個類來保存這些叫做custom-tooltip CSS樣式：

/* Tooltip */ 

.custom-tooltip+.tooltip>.tooltip-inner { 
    padding: 15px; 
    font-size: 1.2em; 
    background-color: #FFEB6C; 
    color: #374D40; 
} 


/* Tooltip on bottom */ 

.custom-tooltip+.tooltip.bottom>.tooltip-arrow { 
    border-bottom: 5px solid #FFEB6C; 
}

$('i[data-toggle="tooltip"]').tooltip({ 
 
    animated: 'fade', 
 
    placement: 'bottom' 
 
});

/* Tooltip */ 
 

 
.custom-tooltip+.tooltip>.tooltip-inner { 
 
    padding: 15px; 
 
    font-size: 1.2em; 
 
    background-color: #FFEB6C; 
 
    color: #374D40; 
 
} 
 

 

 
/* Tooltip on top */ 
 
.custom-tooltip+.tooltip.top>.tooltip-arrow { 
 
    border-top: 5px solid #FFEB6C; 
 
} 
 

 

 
/* Tooltip on bottom */ 
 
.custom-tooltip+.tooltip.bottom>.tooltip-arrow { 
 
    border-bottom: 5px solid #FFEB6C; 
 
} 
 

 

 
/* Tooltip on left */ 
 
.custom-tooltip+.tooltip.left>.tooltip-arrow { 
 
    border-left: 5px solid #FFEB6C; 
 
} 
 

 

 
/* Tooltip on right */ 
 
.custom-tooltip+.tooltip.right>.tooltip-arrow { 
 
    border-right: 5px solid #FFEB6C; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<i class="fa fa-fire fa-lg custom-tooltip" data-toggle="tooltip" data-placement="bottom" title="Fire Place"></i>

來源

2017-05-08 20:17:27

引導工具提示，風格各異

回答

相關問題