Title: cliackable words/wordlinks and hoverboxes
Last modified: August 22, 2016

---

# cliackable words/wordlinks and hoverboxes

 *  Resolved [Res2](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/cliackable-wordswordlinks-and-hoverboxes/)
 * 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](https://wordpress.org/support/users/res2/)
 * (@res2)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/cliackable-wordswordlinks-and-hoverboxes/#post-5347030)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/raindrops/1.700/screenshot.png)
 * raindrops
 * [Support Threads](https://wordpress.org/support/theme/raindrops/)
 * [Active Topics](https://wordpress.org/support/theme/raindrops/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/raindrops/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/raindrops/reviews/)

 * 1 reply
 * 1 participant
 * Last reply from: [Res2](https://wordpress.org/support/users/res2/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/cliackable-wordswordlinks-and-hoverboxes/#post-5347030)
 * Status: resolved