Goedenavond dames en heren,
Hopelijk weet iemand raad? Zou er blij mee zijn!
Er is sprake van tooltips
( .../test.html onder het kopje Tooltip Testen )
Er is sprake van icoontjes die gehoverd kunnen worden waarna de tooltip verschijnt.
Op deze icoontjes wordt :before {content:url(..);} toegepast
Dit dus i.p.v. <img src="plaatjes-signs/info.gif" width="12" height="11" alt="" />
gecombineerd met een hyperlink èn .before_info werken de tooltips in alle browsers = OK
:thumb: Deze werkt:
zonder een hyperlink en met <img src> werken ze in alle browsers = OK.
:thumb: Deze werkt:
zonder een hyperlink maar met .before_info werken ze in IE, Firefox, Opera = OK.
Maar niet in Google, Safari, Maxthon: de icoontjes zijn zichtbaar maar de hover is niet meer actief.
:shocked: Deze .before_info werkt niet:
:shocked: Deze .before_info werkt ook niet:
Heeft iemand enig idee?
Dank, met vriendelijke groet, janyep
Hopelijk weet iemand raad? Zou er blij mee zijn!
Er is sprake van tooltips
( .../test.html onder het kopje Tooltip Testen )
Code:
/* .tooltip bron: http://www.vision.to/articles/auto-positioning-for-absolute-elements.php */
.tooltip { cursor:help; } /* dus geen help voor .tooltip a */
.tooltip a:after { content:none !important; } /* = uitsluiting #box_tekst a:after | zie 8. Selectors voor box_tekst */
.tooltip span { position:absolute; left:-9999em; background:#f4f4f4; color:#046cb8; padding:2em .45em; text-decoration:none; display:block; min-width:400px; z-index:100; }
.tooltip:hover span { left:auto; }
.tooltip:hover span:before { content:url(../plaatjes-signs/drop-right-orange.png)'\a0'; } /* \a0 = spatie */Er is sprake van icoontjes die gehoverd kunnen worden waarna de tooltip verschijnt.
Op deze icoontjes wordt :before {content:url(..);} toegepast
Dit dus i.p.v. <img src="plaatjes-signs/info.gif" width="12" height="11" alt="" />
Code:
.before_info:before { content:url(../plaatjes-signs/info.gif)'\a0''\a0'; } /* \a0 = spatie */gecombineerd met een hyperlink èn .before_info werken de tooltips in alle browsers = OK
:thumb: Deze werkt:
HTML:
<span class="tooltip">
<a href="https://www.google.nl/" target="_blank" title="google.nl" class="before_info"></a>
<span>Tooltip-tekst</span>
</span>zonder een hyperlink en met <img src> werken ze in alle browsers = OK.
:thumb: Deze werkt:
HTML:
<span class="tooltip">
<img src="plaatjes-signs/info.gif" width="12" height="11" alt="" />
<span>Tooltip-tekst</span>
</span>zonder een hyperlink maar met .before_info werken ze in IE, Firefox, Opera = OK.
Maar niet in Google, Safari, Maxthon: de icoontjes zijn zichtbaar maar de hover is niet meer actief.
:shocked: Deze .before_info werkt niet:
HTML:
<span class="tooltip before_info">
<span>Tooltip-tekst</span>
</span>:shocked: Deze .before_info werkt ook niet:
HTML:
<span class="tooltip">
<b class="before_info"></b>
<span>Tooltip-tekst</span>
</span>Heeft iemand enig idee?
Dank, met vriendelijke groet, janyep
Laatst bewerkt:
