谷歌圖表中的工具提示樣式

我想知道是否可以在谷歌折線圖中更改DEFAULT工具提示的字體顏色。谷歌圖表中的工具提示樣式

我想通過更改CSS樣式這樣做：

<style> 

    .google-visualization-tooltip { 

      width: 150px !important; 
      border: none !important; 
      border-radius: 21px !important; 
      background-color: rgb(30, 50, 230)!important; 
      position: absolute !important; 
      box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75) !important; 
      background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%) !important; 
      font-size: 10px !important; 

      } 


    </style>

這一切的CSS行的工作很好，但我還沒有找到字體顏色PARAM直到現在。

順便說一句，如果我修改「tooltip.textStyle」參數Line Chart API字體顏色會改變，但上面提到的CSS代碼變得不可用。

謝謝！

來源

2014-04-25 J.Arranz

我明白了！

我需要在樣式標記中插入此行。

div.google-visualization-tooltip > ul > li > span { 
color: #ff0000 !important;

來源

2014-05-08 16:02:00

除了從問同樣的用戶給出的答案...

您必須設置

tooltip: { isHtml: true }

在圖表選項的CSS工作。請閱讀谷歌圖表官方文檔：customizing tooltip content

來源

2015-01-19 15:16:14 Spyros

總結上面的人給出的答案。 :)

通過將此代碼寫入您的谷歌圖表選項，啓用工具提示由HTML處理。代碼：tooltip: { isHtml: true } (,)如有必要，請添加逗號。 :)

現在您可以使用HTML和css樣式工具提示。 :)

/CSS樣式/

樣式的工具提示框：

div.google-visualization-tooltip {}

款式像字體大小，顏色的內容，等

div.google-visualization-tooltip > ul > li > span {}

使用!important需要時; ）

來源

2016-05-17 06:42:51 b0y

有當前版本的圖表加載CSS文件：

https://www.gstatic.com/charts/45.1/css/core/tooltip.css

在這個文件中，你可以看到由谷歌開發者寫的什麼風格，只是用自己的覆蓋。 添加！重要的，如果不工作。示例：

.google-visualization-tooltip { 
    border:none !important; 
}

並只加載您的自定義CSS爲任何其他CSS。

如何獲取當前版本的CSS文件？

您可以在chrome的網絡標籤中獲得最新版本。開放式開發工具（例如右鍵單擊任何html對象並選擇「檢查」）

來源

2017-04-18 10:40:34

谷歌圖表中的工具提示樣式

回答

相關問題