diff --git a/examples/highlights.html b/examples/highlights.html
index e5c3fe7..4f90ae7 100644
--- a/examples/highlights.html
+++ b/examples/highlights.html
@@ -112,6 +112,18 @@
// console.log(location);
});
+ rendition.on("markMouseover", () => {
+ console.log('mouseover from rendition');
+ });
+
+ rendition.on("markMouseout", () => {
+ console.log('mouseout from rendition');
+ });
+
+ rendition.on("markClicked", () => {
+ console.log('clicked from rendition');
+ });
+
// Apply a class to selected text
rendition.on("selected", function(cfiRange, contents) {
rendition.annotations.highlight(
diff --git a/src/rendition.js b/src/rendition.js
index 14a21b4..6245696 100644
--- a/src/rendition.js
+++ b/src/rendition.js
@@ -419,6 +419,10 @@ class Rendition {
view.on(EVENTS.VIEWS.MARK_CLICKED, (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, view.contents));
+ view.on(EVENTS.VIEWS.MARK_MOUSEOVER, (cfiRange, data) => this.triggerMarkMouseOverEvent(cfiRange, data, view.contents));
+
+ view.on(EVENTS.VIEWS.MARK_MOUSEOUT, (cfiRange, data) => this.triggerMarkMouseOutEvent(cfiRange, data, view.contents));
+
this.hooks.render.trigger(view, this)
.then(() => {
if (view.contents) {
@@ -904,7 +908,7 @@ class Rendition {
* @memberof Rendition
*/
this.emit(EVENTS.RENDITION.SELECTED, cfirange, contents);
- }
+}
/**
* Emit a markClicked event with the cfiRange and data from a mark
@@ -923,6 +927,14 @@ class Rendition {
this.emit(EVENTS.RENDITION.MARK_CLICKED, cfiRange, data, contents);
}
+ triggerMarkMouseOverEvent(cfiRange, data, contents){
+ this.emit(EVENTS.RENDITION.MARK_MOUSEOVER, cfiRange, data, contents);
+ }
+
+ triggerMarkMouseOutEvent(cfiRange, data, contents){
+ this.emit(EVENTS.RENDITION.MARK_MOUSEOUT, cfiRange, data, contents);
+ }
+
/**
* Get a Range from a Visible CFI
* @param {string} cfi EpubCfi String
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 0d3f423..2b69dc8 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -51,6 +51,8 @@ export const EVENTS = {
LOCATION_CHANGED : "locationChanged",
RELOCATED : "relocated",
MARK_CLICKED : "markClicked",
+ MARK_MOUSEOUT: "markMouseout",
+ MARK_MOUSEOVER: "markMouseover",
SELECTED : "selected",
LAYOUT: "layout"
},