diff --git a/compendium-browser.css b/compendium-browser.css
index 62a71c6..3923145 100644
--- a/compendium-browser.css
+++ b/compendium-browser.css
@@ -151,6 +151,9 @@
 	white-space: nowrap;
 	overflow: hidden;
 }
+.compendium-browser .browser ul li .spell-tags span.negative {
+	color: #bbb;
+}
 .compendium-browser .browser .spacer {
 	display: inline-block;
 	min-width: 5px;
diff --git a/template/feat-browser-list.html b/template/feat-browser-list.html
index 4595dad..7fcc305 100644
--- a/template/feat-browser-list.html
+++ b/template/feat-browser-list.html
@@ -1,28 +1,25 @@
 {{#each listItems as |feat id|}}
-<li
-  class="feat flexrow draggable"
-  data-entry-compendium="{{feat.compendium}}"
-  data-entry-id="{{id}}"
->
-  <div class="item-image">
-    <img
-      class=""
-      data-src="{{feat.img}}"
-      title="{{feat.name}}"
-      width="32"
-      height="32"
-    />
-  </div>
-  <div class="item-name">
-    <span class="item-edit"
-      ><a title="({{feat.compendium}})">{{feat.name}}</a></span
-    >
-  </div>
-  <div class="feat-tags">
-    <span title="Class Requirement">{{feat.classRequirementString}}</span>
-  </div>
-  <div class="filter-tags">
-    <input type="hidden" name="class" value="{{feat.classRequirementString}}" />
-  </div>
+<li class="feat flexrow draggable" data-entry-compendium="{{feat.compendium}}" data-entry-id="{{id}}">
+	<div class="item-image">
+		<img
+			class=""
+			data-src="{{feat.img}}"
+			data-tooltip="{{feat.name}}"
+			data-tooltip-direction="UP"
+			width="32"
+			height="32"
+		/>
+	</div>
+	<div class="item-name">
+		<span class="item-edit"
+			><a data-tooltip="({{feat.compendium}})" data-tooltip-direction="UP">{{feat.name}}</a></span
+		>
+	</div>
+	<div class="feat-tags">
+		<span data-tooltip="Class Requirement" data-tooltip-direction="UP">{{feat.classRequirementString}}</span>
+	</div>
+	<div class="filter-tags">
+		<input type="hidden" name="class" value="{{feat.classRequirementString}}" />
+	</div>
 </li>
 {{/each}}
diff --git a/template/item-browser-list.html b/template/item-browser-list.html
index 7932f4c..d8b80b6 100644
--- a/template/item-browser-list.html
+++ b/template/item-browser-list.html
@@ -1,28 +1,25 @@
 {{#each listItems as |item id|}}
-<li
-  class="item flexrow draggable"
-  data-entry-compendium="{{item.compendium}}"
-  data-entry-id="{{id}}"
->
-  <div class="item-image">
-    <img
-      class=""
-      data-src="{{item.img}}"
-      title="{{item.name}}"
-      width="32"
-      height="32"
-    />
-  </div>
-  <div class="item-name">
-    <span class="item-edit"
-      ><a title="({{item.compendium}})">{{item.name}}</a></span
-    >
-  </div>
-  <div class="item-tags">
-    <span title="Item Type">{{item.type}}</span>
-  </div>
-  <div class="filter-tags">
-    <input type="hidden" name="type" value="{{item.type}}" />
-  </div>
+<li class="item flexrow draggable" data-entry-compendium="{{item.compendium}}" data-entry-id="{{id}}">
+	<div class="item-image">
+		<img
+			class=""
+			data-src="{{item.img}}"
+			data-tooltip="{{item.name}}"
+			data-tooltip-direction="UP"
+			width="32"
+			height="32"
+		/>
+	</div>
+	<div class="item-name">
+		<span class="item-edit"
+			><a data-tooltip="({{item.compendium}})" data-tooltip-direction="UP">{{item.name}}</a></span
+		>
+	</div>
+	<div class="item-tags">
+		<span data-tooltip="Item Type" data-tooltip-direction="UP">{{item.type}}</span>
+	</div>
+	<div class="filter-tags">
+		<input type="hidden" name="type" value="{{item.type}}" />
+	</div>
 </li>
 {{/each}}
diff --git a/template/loading.html b/template/loading.html
index ef3899d..3ffe1af 100644
--- a/template/loading.html
+++ b/template/loading.html
@@ -1,13 +1,13 @@
 <img
-  class=""
-  src="icons/sundries/books/book-open-turquoise.webp"
-  title="Loading book"
-  width="32"
-  height="32"
+	class=""
+	src="icons/sundries/books/book-open-turquoise.webp"
+	data-tooltip="Loading book"
+	data-tooltip-direction="UP"
+	width="32"
+	height="32"
 />
 <span class="item-edit">
-  {{#if doneLoading}} {{localize "CMPBrowser.LOADED.Message" numLoaded=numLoaded
-  itemType=itemType}} {{else}} {{localize "CMPBrowser.LOADING.Message"
-  numLoaded=numLoaded itemType=itemType}} {{/if}} {{#if maxLoaded}}{{localize
-  "CMPBrowser.LOADED.MaxLoaded"}}{{/if}}
+	{{#if doneLoading}} {{localize "CMPBrowser.LOADED.Message" numLoaded=numLoaded itemType=itemType}} {{else}}
+	{{localize "CMPBrowser.LOADING.Message" numLoaded=numLoaded itemType=itemType}} {{/if}} {{#if maxLoaded}}{{localize
+	"CMPBrowser.LOADED.MaxLoaded"}}{{/if}}
 </span>
diff --git a/template/npc-browser-list.html b/template/npc-browser-list.html
index ff16114..5b98fce 100644
--- a/template/npc-browser-list.html
+++ b/template/npc-browser-list.html
@@ -1,33 +1,30 @@
 {{#each listItems as |npc id|}}
-<li
-  class="npc flexrow draggable"
-  data-entry-compendium="{{npc.compendium}}"
-  data-entry-id="{{id}}"
->
-  <div class="npc-image">
-    <img
-      class=""
-      data-src="{{npc.img}}"
-      title="{{npc.name}}"
-      width="32"
-      height="32"
-    />
-  </div>
-  <div class="npc-line">
-    <div class="npc-name">
-      <span class="item-edit"
-        ><a title="({{npc.compendium}})">{{npc.name}}</a></span
-      >
-    </div>
-    <div class="npc-tags">
-      <span class="cr" title="Challange Rating">CR {{npc.displayCR}}</span>
-      <span class="size">{{npc.displaySize}}</span>
-      <span class="type">{{npc.displayType}}</span>
-    </div>
-    <div class="filter-tags">
-      <input type="hidden" name="order.cr" value="{{npc.orderCR}}" />
-      <input type="hidden" name="order.size" value="{{npc.orderSize}}" />
-    </div>
-  </div>
+<li class="npc flexrow draggable" data-entry-compendium="{{npc.compendium}}" data-entry-id="{{id}}">
+	<div class="npc-image">
+		<img
+			class=""
+			data-src="{{npc.img}}"
+			data-tooltip="{{npc.name}}"
+			data-tooltip-direction="UP"
+			width="32"
+			height="32"
+		/>
+	</div>
+	<div class="npc-line">
+		<div class="npc-name">
+			<span class="item-edit"
+				><a data-tooltip="({{npc.compendium}})" data-tooltip-direction="UP">{{npc.name}}</a></span
+			>
+		</div>
+		<div class="npc-tags">
+			<span class="cr" data-tooltip="Challange Rating" data-tooltip-direction="UP">CR {{npc.displayCR}}</span>
+			<span class="size">{{npc.displaySize}}</span>
+			<span class="type">{{npc.displayType}}</span>
+		</div>
+		<div class="filter-tags">
+			<input type="hidden" name="order.cr" value="{{npc.orderCR}}" />
+			<input type="hidden" name="order.size" value="{{npc.orderSize}}" />
+		</div>
+	</div>
 </li>
 {{/each}}
diff --git a/template/spell-browser-list.html b/template/spell-browser-list.html
index f171625..5dc436a 100644
--- a/template/spell-browser-list.html
+++ b/template/spell-browser-list.html
@@ -1,25 +1,50 @@
-
 {{#each listItems as |spell id|}}
 <li class="spell flexrow draggable" data-entry-compendium="{{spell.compendium}}" data-entry-id="{{id}}">
-    <div class="item-image">
-        <img class="" data-src="{{spell.img}}" title="{{spell.name}}" width="32" height="32"/>
-    </div>  
-    <div class="item-name">
-        <span class="item-edit" ><a title="({{spell.compendium}})">{{spell.name}}</a></span>
-    </div>
-    <div class="spell-tags">
-        <span title="Spell level">{{#if spell.data.level}}{{spell.data.level}}{{else}}C{{/if}}</span>
-        <div class="spacer-large"></div>
-        <span {{#unless spell.data.components.ritual}}style="color:#bbb;" title="{{localize "No"}} {{localize "DND5E.Ritual"}}"{{else}} title="{{localize "DND5E.Ritual"}}"{{/unless}}>R</span>
-        <span {{#unless spell.data.components.concentration}}style="color:#bbb;" title="{{localize "No"}} {{localize "DND5E.Concentration"}}"{{else}} title="{{localize "DND5E.Concentration"}}"{{/unless}}>C</span>
-        <div class="spacer"></div>
-        <span {{#unless spell.data.components.vocal}}style="color:#bbb;" title="{{localize "No"}} {{localize "DND5E.ComponentVerbal"}}"{{else}} title="{{localize "DND5E.ComponentVerbal"}}"{{/unless}}>V</span>
-        <span {{#unless spell.data.components.somatic}}style="color:#bbb;" title="{{localize "No"}} {{localize "DND5E.ComponentSomatic"}}"{{else}} title="{{localize "DND5E.ComponentSomatic"}}"{{/unless}}>S</span>
-        <span {{#unless spell.data.components.material}}style="color:#bbb;" title="no{{localize "No"}} {{localize "DND5E.ComponentMaterial"}}"{{else}} title="{{localize "DND5E.ComponentMaterial"}}"{{/unless}}>M</span>
-    </div>
-    <div class="filter-tags">                
-        <input type="hidden" name="level" value="{{spell.data.level}}">
-    </div>
+	<div class="item-image">
+		<img
+			class=""
+			data-src="{{spell.img}}"
+			data-tooltip="{{spell.name}}"
+			data-tooltip-direction="UP"
+			width="32"
+			height="32"
+		/>
+	</div>
+	<div class="item-name">
+		<span class="item-edit"><a data-tooltip="({{spell.compendium}})">{{spell.name}}</a></span>
+	</div>
+	<div class="spell-tags">
+		<span data-tooltip="Spell level">{{#if spell.data.level}}{{spell.data.level}}{{else}}C{{/if}}</span>
+		<div class="spacer-large"></div>
+		<span
+			class="{{#unless spell.data.components.ritual}}negative{{/unless}}"
+			data-tooltip="{{localize 'DND5E.Ritual'}}"
+			>R</span
+		>
+		<span
+			class="{{#unless spell.data.components.concentration}}negative{{/unless}}"
+			data-tooltip="{{localize 'DND5E.Concentration'}}"
+			>C</span
+		>
+		<div class="spacer"></div>
+		<span
+			class="{{#unless spell.data.components.vocal}}negative{{/unless}}"
+			data-tooltip="{{localize 'DND5E.ComponentVerbal'}}"
+			>V</span
+		>
+		<span
+			class="{{#unless spell.data.components.somatic}}negative{{/unless}}"
+			data-tooltip="{{localize 'DND5E.ComponentSomatic'}}"
+			>S</span
+		>
+		<span
+			class="{{#unless spell.data.components.material}}negative{{/unless}}"
+			data-tooltip="{{localize 'DND5E.ComponentMaterial'}}"
+			>M</span
+		>
+	</div>
+	<div class="filter-tags">
+		<input type="hidden" name="level" value="{{spell.data.level}}" />
+	</div>
 </li>
 {{/each}}
-   
\ No newline at end of file