1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies. En savoir plus.

HTML-CSS Crée votre propre ToolTip.

Discussion dans 'Programmation' créé par bySqueakers, 1 Décembre 2016.

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

  1. bySqueakers

    bySqueakers Lobbyman / Moddeur PS3 Donateur

    175
    26
    250
    Salut la communauté de Pepsyz.

    Je vais apprendre à certaines personnes qui commence la Programation Web à crée sa propre Tooltip.
    (Image plus bas).

    Ouvrez votre Éditeur de Texte (Sublime Texte 2)

    Ouvrez un Ficher : votretexte.html

    Exemple pour le rôle administrateur :
    Code:
    Code:
    
    <style>
    /* Tooltip container */
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted grey; /* If you want dots under the hoverable text */
    }
    
    /* Tooltip text */
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 130px;
    background-color: grey;
    color: #FFF;
    text-align: center;
    padding: 8px 0;
    border-radius: 7px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    }
    
    /* Show the tooltip text when you mouse over the tooltip
    container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    
    </style>
    <div class="tooltip">Administrateur
    <center><span class="tooltiptext">Ont peut role de gere  dans un sens global</span></center>
    </div>
    Il faut connaître un minimum de base HTLM5/CSS3 pour comprendre ce code.


    Vous devez vous enregistrer ou vous identifier pour voir le contenu


    Bonne fin de soirée,

    Source : Rg

    Nowaz PM|T.
     
    Dernière édition par un modérateur: 2 Décembre 2016
    Pitupo PM|T apprécie ceci.
  2. WWT | VectorXHD

    WWT | VectorXHD Visiteur Visiteur

    0
    0
    0
    JAMAIS OH GRAND JAMAIS mettre le CSS dans le .html sauf exception mais jamais un gros truc comme sa :)
    PS: je vois pas l'image
     
    bySqueakers apprécie ceci.
  3. bySqueakers

    bySqueakers Lobbyman / Moddeur PS3 Donateur

    175
    26
    250

    Vous devez vous enregistrer ou vous identifier pour voir le contenu

    JAMAIS OH GRAND JAMAIS mettre le CSS dans le .html sauf exception mais jamais un gros truc comme sa :)
    PS: je vois pas l'image
    Cliquez pour agrandir...
    Oui tkt je c'est ;) Mais pour des trucs comme sa je m'embrouille entre les 2 fichier^^
     
  • SebMarley PM|T

    SebMarley PM|T Administrateur Membre du personnel Administrateur

    284
    146
    1 188

    Vous devez vous enregistrer ou vous identifier pour voir le contenu

    Salut la communauté de Pepsyz.

    Je vais apprendre à certaines personnes qui commence la Programation Web à crée sa propre Tooltip.
    (Image plus bas).

    Ouvrez votre Éditeur de Texte (Sublime Texte 2)

    Ouvrez un Ficher : votretexte.html

    Exemple pour le rôle administrateur :
    Code:
    Code:
    
    <style>
    /* Tooltip container */
    .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted grey; /* If you want dots under the hoverable text */
    }
    
    /* Tooltip text */
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 130px;
    background-color: grey;
    color: #FFF;
    text-align: center;
    padding: 8px 0;
    border-radius: 7px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    }
    
    /* Show the tooltip text when you mouse over the tooltip
    container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }
    
    </style>
    <div class="tooltip">Administrateur
    <center><span class="tooltiptext">Ont peut role de gere  dans un sens global</span></center>
    </div>
    Il faut connaître un minimum de base HTLM5/CSS3 pour comprendre ce code.

    Bonne fin de soirée,

    Nowaz PM|T.
    Cliquez pour agrandir...
    salut

    il manque l' image , veux tu bien mettre ta source & ou crédit
     
  • bySqueakers

    bySqueakers Lobbyman / Moddeur PS3 Donateur

    175
    26
    250

    Vous devez vous enregistrer ou vous identifier pour voir le contenu

    salut

    il manque l' image , veux tu bien mettre ta source & ou crédit
    Cliquez pour agrandir...
    C'est bon pour l'image je met la source ce soir ;)
     
  • SebMarley PM|T

    SebMarley PM|T Administrateur Membre du personnel Administrateur

    284
    146
    1 188
    Dernière édition: 2 Décembre 2016
  • SebMarley PM|T

    SebMarley PM|T Administrateur Membre du personnel Administrateur

    284
    146
    1 188
    image ajoute au topic :)
     
  • bySqueakers

    bySqueakers Lobbyman / Moddeur PS3 Donateur

    175
    26
    250

    Vous devez vous enregistrer ou vous identifier pour voir le contenu

    image ajoute au topic :)
    Cliquez pour agrandir...
    Merci bien
     
  • Partager cette page

    Sécurité du site Web