造型工具提示（popper.js/bootstrap v4測試版）

我已經安裝了bootstrap v4測試版並使用popper.js（tooltip.js）庫。我試圖使用它的工具提示功能。所以我設法讓它出現，但我無法改變它的外觀/風格爲我的生活。我已經多次查看過他們的文檔，但我無法弄清楚。（我只是討厭所謂的「文檔」，沒有例子）。因此，這裏是我的html：造型工具提示（popper.js/bootstrap v4測試版）

<span data-toggle="tooltip" data-placement="right" title="Tooltip on right">Simple Task Management</span>

我激活它的數據切換的JS：

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

我注意到，提示出現時，一個新的div與類「工具提示創建.. 」所以我想我可以瞄準這個類和風格在我SCSS，所以：

.tooltip { 
    background-color: #DB2828; 
    color: $green; 
}

不是我預期的樣式選擇，只是測試，看看它的工作...好結果：

與我背後的測試背景相同的黑色背景...有人可以幫我解決這個問題嗎？非常感謝。

來源

2017-08-30 Alin Faur

工具提示的結構是described in the docs。要改變你需要重寫tooltip-inner ~~風格和 arrow~~ ：

更新引導4.0.0

Demo

.tooltip-inner { 
    background-color: #00cc00; 
} 
.tooltip.bs-tooltip-right .arrow:before { 
    border-right-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-left .arrow:before { 
    border-left-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-bottom .arrow:before { 
    border-bottom-color: #00cc00 !important; 
} 
.tooltip.bs-tooltip-top .arrow:before { 
    border-top-color: #00cc00 !important; 
}

（其中#00cc00是所需的工具提示的顏色）

來源

2017-08-30 10:32:59 ZimSystem

謝謝你，工作，我想知道你是否能告訴你如何找出改變。你在哪裏可以找到這些信息？ –

我同意......通過查看這些文檔，我將永遠不會知道：前幾位。 – user292701

p.s.我發現我需要設置箭頭：之前，但不是.arrow，否則我的箭頭被拖拽......和p.p.s.對於那些使用Angular-4的人來說，你必須將這些css規則放在全局styles.css中，因爲工具提示是在組件的DOM之外創建的（假設你在「組件」中創建工具提示）。 – user292701

對我來說，我不得不這樣做，而不是底部的工具提示：

.tooltip-inner { 
    background-color: $darkGrayClr; 
} 
.tooltip.bs-tooltip-bottom .arrow:before { 
    border-bottom-color: $darkGrayClr; 
}

來源

2018-01-18 21:33:52 Symro

造型工具提示（popper.js/bootstrap v4測試版）

回答

相關問題