Les info-bulles de style dans google charts

Je voudrais savoir si il est possible de changer la couleur de la police de DÉFAUT des info-bulles dans google ligne graphique.

Je veux le faire en modifiant la feuille de style css comme ceci:

<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>

Tout ceci lignes css fonctionnent bien, mais je n'ai pas trouvé la couleur de la police param jusqu'à maintenant.

Par la façon dont, si je modifie "info-bulle.textStyle" param de La ligne Graphique de l'API la couleur de la police change, mais le code CSS mentionné ci-dessus deviennent inutilisables.

Merci!

OriginalL'auteur J.Arranz | 2014-04-25

  1. 5

    Je l'ai eu!

    J'ai besoin d'insérer cette ligne dans le style de la balise.

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

    OriginalL'auteur J.Arranz

  2. 5

    En plus de la réponse donnée par le même utilisateur qui a demandé...

    Vous devez définir 

    tooltip: { isHtml: true }

    dans les options du graphique pour le CSS de travail.
    Veuillez lire l'officiel de Google Charts documentation: personnalisation de l'info-bulle de contenu

    OriginalL'auteur Spyros

  3. 5

    Il y a un fichier CSS chargé par la version actuelle de diagrammes:

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

    Dans ce fichier, vous pouvez voir ce que les styles ont été écrites par les développeurs de Google et de remplacer simplement avec votre propre. Ajouter !important si ne fonctionne pas. Exemple:

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

    Et il suffit de charger votre css personnalisé comme tout autre css.

    Comment obtenir la version actuelle du fichier CSS?

    Vous pouvez mettre à jour la version de google chrome onglet réseau. Ouvrir les outils de développement (par exemple, cliquez-droit sur n'importe quel objet html et choisir "inspecter")

    Les info-bulles de style dans google charts

    OriginalL'auteur Lukas

  4. 4

    Résumant les réponses données par les personnes ci-dessus. 🙂

    Activer les info-bulle pour être traitées par le HTML par l'écriture de ce code dans vos options de google CODE graphiques: tooltip: { isHtml: true } (,) ajouter une virgule si nécessaire. 🙂

    Maintenant, vous pouvez définir le style d'info-bulle à l'aide de HTML et css. 🙂

    /CSS Style/

    De style de l'info-bulle de la boîte :

    div.google-visualization-tooltip {}

    De style, le contenu, comme la taille de police, couleur, etc

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

    Utilisation !important en cas de besoin 😉

    OriginalL'auteur b0y