Show tooltip with Underline Words using Underlined Definitions Plugin

JQuery 3.3.1, Underlined Definitions

Snippet by CodAmz

360 0

Resources

<head>
			<div class="header"><span>Underline</span> Definitions javascript plugin in action!</div>
		</head>
		
		<p>
		    Underlined Definitions let you describe choosed words all over your site just by setting two arrays, Words and Definitions, which matches each other
		</p>

		<div class="text">
				<p><strong>Penguins</strong> (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sea life caught while swimming underwater. They spend about half of their lives on land and half in the oceans.</p>
				
				<p>Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator.</p>

		</div>

* {
	margin: 0;
	padding: 0;
}

strong {
	font-weight: bold;
}

body {
	color: #333;
	font-family: SourceRegular;
}

.wrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100vh;
}

.header {
	height: 100px;
	white-space: nowrap;
	line-height: 100px;
	font-size: 3em;
	text-align: center;
	background-color: #049ccf;
}

.header span {
	border-bottom: 1px dashed #333
}

.header span:hover {
	border-bottom: 1px solid #333
}

.text {
	margin: 0 auto;
	text-align: center;
	padding: 20px 50px;
	font-size: 26px;
}

p {
	margin: 20px;
}

.customUnderline {
	border-bottom: 1px dashed #333;
	cursor: help;
}

$(function() {

	var words = ["aquatic", "krill", "temperate"],
		definitions = ["The term water bird, waterbird or aquatic bird is used to refer to birds that live on or around water.", 
		"Krill are small crustaceans of the order Euphausiacea, and are found in all the world's oceans.", 
		"In geography, the temperate or tepid climates of Earth occur in the middle latitudes, which span between the tropics and the polar regions of Earth."];

	$(".text").underlineDef({
		words: words,
		definitions: definitions,
		search: 'google',
		// underlineClass: 'customUnderline'
	});

});

Javascript Resources

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://codeamaze.com/Uploads/Resources/2018/08/FGWle5s7788/js/jquery.underline-def.min.js