cliackable words/wordlinks and hoverboxes

  • Resolved Res2

    (@res2)


    10 years, 2 months ago

    Hi

    I’ve noticed that Raindrops has deactivated the informational hover-boxes one might add to links in posts and on pages. (Via the Insert/edit link button menu on Edit Post, for example.)

    Is there a way to reactivate this feature?

    If possible, I’d also be interested in applying a similar feature, where the box only appears once you click the word (click-activated, rather than hover-activated).
    Of course, the word would not function as a link, then – as the clickable word would then only activate the small infobox.
    Does anyone know of a way to code that?

Viewing 1 replies (of 1 total)
  • Thread Starter Res2

    (@res2)

    I’ve found a solution for this question elsewhere.

    For the record, it can be done this way: In wp’s Edit post/page, choose the text mode and then frame the WORD you want to give an info popup in this manner:
    <a>WORD<span>the info content you wish</span></a>

    In your child style.css, you can use this template
    First, we need to hide the info content:
    'Appropriate div adress of the word you've given a popup link' a span {display: none;}

    Then, we set the popup location and style. For example:

    'Appropriate div adress of the word you've given a popup link' a:hover span{
	display: block;
	position: absolute;
	top: inherit;
	left: inherit;
	width: 125px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #AAA; background: black;
	font: 10px Verdana, sans-serif;
	text-align: center;
}

    Finally, you might want to style these info popups in a particular way, so that they might be recognized as different from ordinary links, for example:

    a.popup{
	color: #833022;
	font-weight: bold;
}

    An example of an alternate css template for popup location:

    [aproppriate adress of the popable word(s)] a:hover span{
	display: block;
	position: absolute;
	top: 200px;
	left: 200px;
	width: 125px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #AAA; background: black;
	font: 10px Verdana, sans-serif;
	text-align: center;
}

    modify as you like. Cheers

Viewing 1 replies (of 1 total)
  • The topic ‘cliackable words/wordlinks and hoverboxes’ is closed to new replies.