SeoSos.nl
CSS Tooltip Ontwerper
(Zweef over deze regel voor een live voorbeeld)
Afbeeldings url (leeg = geen afbeelding)
Titel (leeg = geen titel)
Ruimte Rondom Titel
Boven
Rechts
Onder
Links
Tekst (leeg = geen tekst)
Ruimte Rondom Tekst
Boven
Rechts
Onder
Links
Achtergrond
Tekstkleur
Breedte (pixels)
Positie
Pijl weergeven
Ronde hoeken
Links boven
Rechts boven
Rechts onder
Links onder
Schaduwkleur
Horizontaal
Vertikaal
Vervaging
Transparantie
HTML-Code
Gekopieerd!
CSS-Code
Gekopieerd!
Over CSS Tooltip Ontwerper
Met de gratis Tooltip Ontwerper van SeoSos kun je in een handomdraai zelf een tooltip maken met animatie en de bijbehorende HTML- en CSS code kopiëren en vervolgens plakken in de code van je eigen website. De gemaakte tooltips werken zonder gebruik te maken van javascript of jquery.
Hoe maak ik tooltips?
Zelf een CSS tooltip maken is eenvoudig en ook nog eens gratis met deze handige online tooltip ontwerper.
Volg deze stappen en maak je eerste ontwerp:
- De inhoud van de tooltip veranderen
Met de inhoud wordt de tooltip afbeelding, titel en tekst bedoeld.
De url moet een online afbeelding zijn.
Zorg ervoor dat de afbeelding het juiste formaat heeft.
Gebruik dus geen afbeelding met een breedte van 1000 pixels in een ontwerp van 400 pixels breed.
Verder kun je hier de ruimte rondom de titel en tekst aangeven in pixels. - Het uiterlijk van de tooltip aanpassen
Onder dit tabblad kun je instellen hoe het tooltip ontwerp eruit ziet.
Kies eenvoudig de achtergrond en tekst kleur.
Voer vervolgens de breedte en positie in.
Ook is er de optie om een pijl te plaatsen (of niet natuurlijk).
Als laatste kun je aangeven of je afgeronde hoeken wilt.
Geef iedere hoek een eigen afronding (in pixels) of vul overal 0 in voor normale vierkante hoeken. - Tooltip maken met schaduw effect
In het tabblad schaduw kun je een schaduweffect aan je ontwerp toevoegen.
Geef als eerste de schaduw kleur op.
De volgende 2 sliders, horizontaal en vertikaal, schuiven de box shadow naar links of rechts of naar boven of beneden.
Een 'blur' toevoegen doe je door de vervaging in pixels in te stellen.
Als laatste kun je de schaduw meer of minder transparant (doorzichtig) maken. 0 is onzichtbaar en 1 is volledig zichtbaar. - Tooltips met animatie maken
Geef onder dit tabblad eerst de snelheid van de tooltip animatie op. De duratie wordt weergegeven in seconden. De standaard duur van de animatie is 1 seconde.
Kies vervolgens je gewenste animatie en bekijk de ingestelde animatie door met je muis op de regel '(Zweef over deze regel voor een live voorbeeld)' te gaan staan. Deze regel vind je vlak boven de tabbladen onder het voorbeeld. - De tooltip code op je eigen website plaatsen
Scroll naar beneden (onder de instellingen) en je ziet de HTML- en CSS code staan.
Klik op de knop 'Kopieer code' en de bijbehorende CSS- of HTML code wordt automatisch gekopieerd.
Plak vervolgens de HTML in de code van je website op de plek waar je de tooltip wilt gebruiken.
De CSS-code kun je tussen de <head> en </head> tags plakken of zonder de <style> en </style> tags in je css bestand plaatsen.
In plaats van de tekst 'Plaats hier je div, link, afbeelding, tekst, enz...' kun je, zoals aangegeven van alles plaatsen.
Een complete <div> met alle bijbehorende inhoud, een afbeelding door middel van een <img /> tag enz... - Een nieuwe tooltip maken of opnieuw beginnen
Ben je klaar met je tooltip-ontwerp en wil je met een nieuwe beginnen met de standaard waarden?
Klik dan op de link 'Instellingen herstellen (refresh)' of druk op CTRL + F5 en alle waardes worden gereset.
De link vind je onderaan iedere instellingen tabblad.
Je eigen tooltips maken is met deze CSS tooltip generator dus super eenvoudig.
Gewoon instellen, kopiëren en plakken en je creëerd de mooiste tooltips voor je website zonder javascript! :-)
