Merge pull request #433 from GatherPress/GP-432

Added tooltip feature and tooltip to Online event block.

build/blocks/online-event/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '1b76f3a1f111f2172711');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b66f96ca40ae99db9eb5');

build/blocks/online-event/online-event.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '90ace17fa428328cb014');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '4ad7014b0fafccb1931a');

build/blocks/online-event/style-index.css

@@ -1 +1 @@
-
+.gp-tooltip{border-bottom:1px dotted}

build/blocks/venue/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '847746449816417b7f5e');
+<?php return array('dependencies' => array('moment', 'react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '608bb08a9858c1be6bd0');

build/blocks/venue/venue.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => 'ea7c2e6e3047c25484de');
+<?php return array('dependencies' => array('react', 'wp-components', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-i18n'), 'version' => '67c19f3b3b0e6b2b4a1a');

package.json

@@ -65,6 +65,7 @@
 		"lodash": "^4.17.21",
 		"moment": "^2.29.4",
 		"playwright": "^1.40.0",
-		"react-modal": "^3.16.1"
+		"react-modal": "^3.16.1",
+		"react-tooltip": "^5.24.0"
 	}
 }

src/blocks/_tooltip.scss

@@ -0,0 +1,3 @@
+.gp-tooltip {
+	border-bottom: 1px dotted;
+}

src/blocks/online-event/style.scss

@@ -0,0 +1 @@
+@import "../tooltip";

src/components/OnlineEvent.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies.
+ */
+import { Tooltip } from 'react-tooltip';
 /**
  * WordPress dependencies.
  */
@@ -6,7 +10,7 @@ import { Flex, FlexItem, Icon } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 /**
- * Internal dependencies
+ * Internal dependencies.
  */
 import { Listener } from '../helpers/broadcasting';
 import { getFromGlobal } from '../helpers/globals';
@@ -25,7 +29,21 @@ const OnlineEvent = ({ onlineEventLinkDefault = '' }) => {
 				<Icon icon="video-alt2" />
 			</FlexItem>
 			<FlexItem>
-				{!onlineEventLink && <span>{text}</span>}
+				{!onlineEventLink && (
+					<>
+						<span
+							className="gp-tooltip"
+							data-tooltip-id="gp-online-event"
+							data-tooltip-content={__(
+								'Link active during event.',
+								'gatherpress'
+							)}
+						>
+							{text}
+						</span>
+						<Tooltip id="gp-online-event" />
+					</>
+				)}
 				{onlineEventLink && (
 					<a href={onlineEventLink} rel="noreferrer" target="_blank">
 						{text}