GUI: use div for tooltip info, fixes #148

gui/index.html

@@ -395,10 +395,12 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioInputI2S">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Receive 16 bit stereo audio from the
 	<a href="http://www.pjrc.com/store/teensy3_audio.html" target="_blank">audio shield</a>
 		or another I2S device, using I2S master mode.</p>
 	<p align=center><img src="img/audioshield_inputs.jpg"></p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -459,7 +461,9 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioInputAnalog">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Receive audio using the built-in analog to digital converter.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -504,7 +508,9 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioInputI2Sslave">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Receive 16 bit stereo audio from an I2S device using I2S slave mode.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -547,10 +553,12 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioOutputI2S">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Transmit 16 bit stereo audio to the
 	<a href="http://www.pjrc.com/store/teensy3_audio.html" target="_blank">audio shield</a>
 		or another I2S device, using I2S master mode.</p>
 	<p align=center><img src="img/audioshield_outputs.jpg"></p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -604,8 +612,10 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioOutputSPDIF">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Transmit 16 bit stereo audio as Digital S/PDIF.</p>
 	<p align=center><img src="img/spdif_proto.jpg"></p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -655,7 +665,9 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioOutputAnalog">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Transmit 12 bit audio using Teensy 3.1's built-in digital to analog converter.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -689,9 +701,11 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioOutputPWM">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Transmit audio using Teensy 3.1's PWM pins.  Two pins are
 		used for coarse and fine pulses, to be combined by scaled
 		resistors.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -737,7 +751,9 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioOutputI2Sslave">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Transmit 16 bit stereo audio to an I2S device using I2S slave mode.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -778,8 +794,10 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioMixer4">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Combine up to 4 audio signals together, each with adjustable gain.
 		All channels support signal attenuation or amplification.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -825,10 +843,12 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioPlayMemory">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Play a short sound clip, stored directly in memory.
 		Data files are created with the
 		<a href="https://github.com/PaulStoffregen/Audio/tree/master/examples/SamplePlayer/wav2sketch" target="_blank">wav2sketch program</a>,
 		and copied to the sketch folder to become part of your sketch.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -875,7 +895,9 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioPlaySdWav">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Play a WAV file, stored on a SD card.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -936,9 +958,11 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioPlaySdRaw">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Play a RAW data file, stored on a SD card.  RAW format is simpler
 		than WAV and begins playing immediately, without parsing WAV file
 		header info.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -989,7 +1013,7 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioPlaySerialflashRaw">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Play a RAW data file, stored on a Serial Flash chip.  These chips
 		are far more efficient than SD cards, allowing many files to be
 		played simultaneously by copies of this object.
@@ -1051,8 +1075,10 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioPlayQueue">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Play audio data provided by the Arduino sketch.  This object provides
 		functions to allow the sketch code to push data into the audio system.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1098,8 +1124,10 @@ span.mainfunction {color: #993300; font-weight: bolder}
 
 <script type="text/x-red" data-help-name="AudioRecordQueue">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Record audio data by sending to the Arduino sketch.  This object allows
 		sketch code to receive audio packets.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1154,7 +1182,9 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthWaveformSine">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create a sine wave signal</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1196,8 +1226,10 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthWaveformSineHires">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create a highly precise, low distortion sine wave signal.
 		Mainly useful for codec &amp; analog circuitry testing.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1235,8 +1267,10 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthWaveformSineModulated">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create a modulated sine wave, using any audio signal to continuously
 		modulate the sine wave frequency.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1279,7 +1313,9 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthWaveform">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create a waveform: sine, sawtooth, square, triangle, pulse or arbitrary.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1347,7 +1383,9 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthToneSweep">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create a continuously varying (in frequency) sine wave</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1376,9 +1414,11 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthWaveformDc">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Create constant (DC) signal, useful for control of objects that take
 		a modulation or control input signal.  This constant level can be
 		used to modify other waveforms using mixer or multiplier objects</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1414,7 +1454,7 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthNoiseWhite">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Create white noise.
 		</p>
 	<p align=center><img src="img/whitenoise.png"></p>
@@ -1447,7 +1487,7 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioSynthNoisePink">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Create pink noise, using Stefan Stenzel's "New Shade Of Pink" algorithm.
 		</p>
 	<!--
@@ -1487,7 +1527,9 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioEffectFade">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Gradually increase or decrease audio level.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1531,11 +1573,13 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioEffectChorus">
 <h3>Summary</h3>
+	<div class=tooltip>
 	<p>The chorus effect simulates the richness of several nearly-identical
 	sound sources (like the way a choir sounds different to a single singer).
 	It does this by sampling from a delay line, so each voice is actually
 	the same but at a slightly different point in time. This is a type of
 	comb filtering.</p>
+	</div>
 	<p>Chorus combines one or more samples ranging from the most recent
 	sample back to about 50ms ago. The additional samples are evenly spread
 	through the supplied delay line, and there is no modulation.</p>
@@ -1580,11 +1624,13 @@ The actual packets are taken
 
 <script type="text/x-red" data-help-name="AudioEffectFlange">
 <h3>Summary</h3>
+	<div class=tooltip>
 	<p>Originally, flanging was produced by playing the same signal on two synchronized
 	reel-to-reel tape recorders and making one of the reels slow down and speed up by
 	pressing on the flange of the reel (hence the name). This is a type of
 	comb filtering, and produces a harmonically-related series of peaks and notches
 	in the audio spectrum.</p>
+	</div>
 	<p>This flanger uses a delay line, combining the original voice with only one sample from the delay
 	line, but the position of that sample varies sinusoidally.</p>
 	<p>The effect can be represented as:<br>
@@ -1640,7 +1686,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectEnvelope">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Modify a signal with a DAHDSR (Delay Attack Hold Decay Sustain
 		Release) envelope.
 	</p>
@@ -1704,7 +1750,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectMultiply">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Multiply two signals together, useful for amplitude modulation
 		or "voltage controlled amplification".
 	</p>
@@ -1740,7 +1786,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectDelay">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Delay a signal.  Up to 8 separate delay taps can be used.</p>
 	<p align=center><img src="img/delay.png"><br><small>1 kHz burst, delayed 5.2 ms.</small></p>
 	</div>
@@ -1789,7 +1835,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectDelayExternal">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Delay a signal, using external memory for longer delay times!  Up to 8 separate delay taps can be used.</p>
 	<p align=center><img src="img/delay.png"><br><small>1 kHz burst, delayed 5.2 ms.</small></p>
 	</div>
@@ -1891,8 +1937,10 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectBitcrusher">
     <h3>Summary</h3>
+	<div class=tooltip>
     <p>Reduce the samplerate and/or bitdepth of a source signal, resulting in
 		a distorted sound.</p>
+	</div>
     <h3>Audio Connections</h3>
     <table class=doc align=center cellpadding=3>
         <tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -1936,9 +1984,11 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioEffectMidSide">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Convert stereo signals to/from Mid-Side format.
 		Mid-Side encoding can be used to increase stereo width, make the lower
 		frequencies mono (to please your sub), or as the basis of audio compression.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>While<br>Encoding</th><th>While<br>Decoding</th></tr>
@@ -1976,7 +2026,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioFilterBiquad">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Biquadratic cascaded filter, useful for all sorts of filtering.
 		Up to 4 stages may be cascaded.
 	</p>
@@ -2040,7 +2090,7 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioFilterFIR">
 	<h3>Summary</h3>
-	<div>
+	<div class=tooltip>
 	<p>Finite impulse response filter, useful for all sorts of filtering.
 	</p>
 	<p align=center><img src="img/fir_filter.png"></p>
@@ -2092,9 +2142,11 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioFilterStateVariable">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>A State Variable (Chamberlin) Filter with 12 dB/octave roll-off,
 		adjustable resonance, and optional signal control of corner
 		frequency.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2151,8 +2203,10 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzePeak">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Track the signal peak amplitude.  Very useful for simple
 		audio level response projects, and general troubleshooting.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2187,8 +2241,10 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzeRMS">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Track the signal RMS amplitude.  Useful for
 		audio level response projects, and general troubleshooting.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2217,9 +2273,11 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzeFFT256">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Compute a 256 point Fast Fourier Transform (FFT) frequency analysis,
 		with real value (magnitude) output.  The frequency resolution is
 		172 Hz, useful for simple audio visualization.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2282,9 +2340,11 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzeFFT1024">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Compute a 1024 point Fast Fourier Transform (FFT) frequency analysis,
 		with real value (magnitude) output.  The frequency resolution is
 		43 Hz, useful detailed for audio visualization.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2351,7 +2411,9 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzeToneDetect">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Detect the level of a single tone</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2405,8 +2467,10 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzeNoteFrequency">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Detect with fairly good accuracy the fundamental frequency f<sub>o</sub>
 		of musical notes, such as electric guitar and bass.</p>
+	</div>
     <p>Written By Collin Duffy</p>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
@@ -2460,8 +2524,10 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioAnalyzePrint">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Print raw audio data to the Arduino Serial Monitor.  This
 		object creates massive output quickly, and should not normally be used.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<table class=doc align=center cellpadding=3>
 		<tr class=top><th>Port</th><th>Purpose</th></tr>
@@ -2500,12 +2566,14 @@ double s_freq = .0625;</p>
 
 <script type="text/x-red" data-help-name="AudioControlSGTL5000">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Control the SGTL5000 chip on the
 		<a href="http://www.pjrc.com/store/teensy3_audio.html" target="_blank">audio shield</a>.
 		SGTL5000 is always used in slave mode, where Teensy controls
 		all I2S timing.
 	</p>
 	<p align=center><img src="img/sgtl5000closeup.jpg"></p>
+	</div>
 	<h3>Audio Connections</h3>
 	<p>This object has no audio inputs or outputs.  Separate i2s objects
 		are used to send and receive audio data.  I2S master mode objects
@@ -2848,7 +2916,9 @@ value  frequency
 
 <script type="text/x-red" data-help-name="AudioControlWM8731">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Control a WM8731 chip in slave mode, where it receives all clocks from Teensy</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<p>This object has no audio inputs or outputs.  Separate i2s objects
 		are used to send and receive audio data.  I2S master mode objects
@@ -2888,7 +2958,9 @@ value  frequency
 
 <script type="text/x-red" data-help-name="AudioControlWM8731master">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Control a WM8731 chip in master mode, where it controls all I2S timing.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<p>This object has no audio inputs or outputs.  Separate i2s objects
 		are used to send and receive audio data.  I2S slave mode objects
@@ -2926,8 +2998,10 @@ value  frequency
 
 <script type="text/x-red" data-help-name="AudioControlAK4558">
 	<h3>Summary</h3>
+	<div class=tooltip>
 	<p>Control the AK4558 chip on the <a href="https://hackaday.io/project/8567-hifi-audio-codec-module" target="_blank">HiFi Audio CODEC Module</a>
 	in slave mode, where the Teensy controls all I2S timing.</p>
+	</div>
 	<h3>Audio Connections</h3>
 	<p>This object has no audio inputs or outputs.  Separate I2S objects
 		are used to send and receive audio data.

gui/red/ui/palette.js

@@ -125,12 +125,12 @@ RED.palette = (function() {
 
 		if (!server) {
 			data = $("script[data-help-name|='" + key + "']").html();
-			var firstP = $("<div/>").append(data).children("p").first().html();
+			var firstP = $("<div/>").append(data).children("div").first().html();
 			options.content = firstP;
 			$(elem).popover(options);
 		} else {
 			$.get( "resources/help/" + key + ".html", function( data ) {
-				var firstP = $("<div/>").append(data).children("p").first().html();
+				var firstP = $("<div/>").append(data).children("div").first().html();
 				options.content = firstP;
 				$(elem).popover(options);
 			});