Comment placer le pointeur de la souris n’importe où sur la page en utilisant Divi

Utilisé pour les icônes d’infobulle) et div dans la zone de contenu (pour le contenu d’infobulle). Cela nous donne plus de liberté pour modéliser les icônes d’infobulle individuellement pendant que nous survolons le contenu de la souris et de l’infobulle. Tout d’abord, ajoutez une portée et spécifiez un point d’interrogation pour la classe. La commande DIV description se poursuit en ajoutant DIV à la zone de contenu de la classe de contenu tooltip. Ajoute la description de la commande sélectionnée à cette div. Paramètres de texte passer à l’onglet conception et modifier les paramètres de texte en conséquence: caractères de texte: ouvrir sans couleur de texte: # FFFFFF Le réglage du texte H3 modifie également le réglage du texte H3. Titre 3 caractères: amatic SC Color text title 3: # FFFFFF title 3 text size: 30 px Nous jouons également à la largeur et à la hauteur du module pour créer l’effet du curseur de la souris.
Largeur: 300 Px hauteur: 42 px L’espacement peut également ajouter un remplissage supérieur. Remplissage supérieur: 10px Visibilité par défaut maintenant, par défaut, nous voulons cacher tout le contenu sous l’icône description de la commande. C’est pourquoi nous cacherons le débordement dans l’onglet avancé. Débordement horizontal: masquer le débordement vertical: masquer Visibilité lorsque vous déplacez la souris, nous voulons tout afficher. Pour ce faire, Nous afficherons le débordement au fur et à mesure que la souris passe. Débordement horizontal: débordement vertical visible: visible Ajouter un module de code sous le module texte maintenant que nous avons défini le style du module, nous devons encore définir span et div dans la zone de contenu en utilisant la classe CSS qui lui est assignée. Ajoutez un formulaire de code directement sous le formulaire texte de description de commande. Ajouter le code CSS au style DIV dans le formulaire texte ajouter la ligne de code suivante
Ce CSS définit le style des différentes parties du formulaire de texte:
– Oui. Point d’interrogation {
Couleur de fond: # 000;
Remplissage: 10px 16px 10px 16px;
Rayon limite: 500px;
}
– Oui. Contenu de l’infobulle
Couleur de fond: # ee6a5b;
Remplissage: 20px;
Rayon limite: 5px;
} Une fois que vous avez copié le formulaire de description de commande deux fois et l’avez placé dans la première colonne des colonnes restantes, vous pouvez Cloner le formulaire de description de commande deux fois et placer la copie dans les deux colonnes restantes de la ligne. Modifiez le contenu de l’infobulle pour vous assurer que vous changez le contenu de la description de commande pour chaque copie. Modifier la commande description de l’emplacement (en utilisant Transform translate) la commande description # 1 enfin et surtout, nous devons repositionner l’infobulle à l’emplacement désiré sur la page. Pour obtenir exactement les mêmes résultats que ceux affichés dans l’aperçu de cet article, ouvrez le premier formulaire texte recommandé et appliquez les valeurs de traduction de conversion suivantes:
Droite: – 450 pixels (bureau), – 2000 pixels (tablette), – 1900 pixels (téléphone) Description de la commande # 2 passez au module de texte description de la commande dans la deuxième colonne et changez la valeur de conversion comme suit: droite: – 400 Px (bureau), – 1300 Px (tablette), – 1250 Px (téléphone) La commande description n.3 fait la même chose pour le module texte de l’infobulle dans la colonne 3! Droite: – 500 pixels (bureau), – 600 pixels (tablette et téléphone) Aperçu maintenant que nous avons terminé toutes les étapes, regardons enfin les résultats sur les différents écrans de taille.
Bureau Mobile Dans cet article, nous vous montrons comment créer et placer un pointeur de souris n’importe où sur la page sans avoir besoin d’un plug – in supplémentaire. C’est une bonne façon d’ajouter plus d’informations sans les inclure directement sur la page. Ce tutoriel de cas d’utilisation est pour nous