# Plugin für Abkürzungen und Akronyme

**URL:** <https://meta.discourse.org/t/abbreviations-and-acronyms-plugin/38501>\
**Category:** Plugin\
**Tags:** deprecated\
**Created:** [26. Januar 2016 um 10:47 UTC](https://meta.discourse.org/t/abbreviations-and-acronyms-plugin/38501 "2016-01-26T10:47:03Z")\
**Posts on this page:** 1\
**Showing post:** 37

<div class="post-metadata">

**Author:** ![Tom\_Newsom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_newsom/32/115981_2.png) [@Tom\_Newsom](https://meta.discourse.org/u/Tom_Newsom)\
**Post date:** [24. Februar 2017 um 11:51 UTC](https://meta.discourse.org/t/abbreviations-and-acronyms-plugin/38501/37 "2017-02-24T11:51:36Z")

</div>

I’ve added touch capability to this plugin with some custom script and css:

 ![](https://global.discourse-cdn.com/meta/original/3X/0/d/0da6532fe1d78bdbd5e2878fe131b3c01e40bcca.png)

With thanks to Scott Asbach for [the original code](http://codepen.io/pingram3541/pen/Gbnam)

`<head>`:

```plaintext
<script type="text/javascript">
    /**
 * touchHover.js
 *
 * Create tooltips on mouseover or on click (for supporting touch interfaces).
 * 
 * @author C. Scott Asbach
 */

$(document).ready(function() {	
	
	/**
	 * store the value of and then remove the title attributes from the
	 * abbreviations (thus removing the default tooltip functionality of
     * the abbreviations)
	 */
	$('abbr').each(function(){		
		
		$(this).data('title',$(this).attr('title'));
		$(this).removeAttr('title');
	
	});

    /**
	 * when abbreviations are mouseover-ed show a tooltip with the data from the title attribute
	 */	
	$('abbr').mouseover(function() {		
		
		// first remove all existing abbreviation tooltips
		$('abbr').next('.touchtooltip').remove();
		
		// create the tooltip
		$(this).after('<span class="touchtooltip">' + $(this).data('title') + '</span>');
		
		// position the tooltip 4 pixels above and 4 pixels to the left of the abbreviation
		var left = $(this).position().left + $(this).width() + 4;
		var top = $(this).position().top - 4;
		$(this).next().css('left',left);
		$(this).next().css('top',top);				
		
	});
	
    /**
	 * when abbreviations are clicked trigger their mouseover event then fade the tooltip
	 * (this is friendly to touch interfaces)
	 */
	$('abbr').click(function(){
		
		$(this).mouseover();
		
		// after a slight 2 second fade, fade out the tooltip for 1 second
		$(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
			$(this).fadeOut(1000);
		}});
		
	});
	
	/**
	 * Remove the tooltip on abbreviation mouseout
	 */
	$('abbr').mouseout(function(){
			
		$(this).next('.touchtooltip').remove();				

	});	
	
});
</script>

```

_mobile_ CSS:

```plaintext
.touchtooltip {
	position:absolute;
	color:white;
	background-color: #FF9999;
	font-size: smaller;
	padding: 4px 8px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

abbr {
    border-bottom: 1px black dotted;
}

```

---

_[View the full topic](https://meta.discourse.org/t/abbreviations-and-acronyms-plugin/38501)._
