diff --git a/assets/css/src/settings.styl b/assets/css/src/settings.styl index 5bdf6be5c7..dc795fc268 100644 --- a/assets/css/src/settings.styl +++ b/assets/css/src/settings.styl @@ -54,6 +54,9 @@ #mailpoet_mta_activate visibility hidden + .tooltip.dashicons.dashicons-editor-help + font-size: 30px + ul.sending-method-benefits list-style-type: none margin-bottom: 2em diff --git a/assets/js/src/help-tooltip.js b/assets/js/src/help-tooltip.js new file mode 100644 index 0000000000..e8796b6172 --- /dev/null +++ b/assets/js/src/help-tooltip.js @@ -0,0 +1,32 @@ +define('helpTooltip', ['mailpoet', 'React', 'react-dom', 'help-tooltip.jsx'], + function (MailPoet, React, ReactDOM, TooltipComponent) { + 'use strict'; + + MailPoet.helpTooltip = { + show: function (domContainerNode, opts) { + + var tooltipText = React.createElement( + "span", + { + style: { + pointerEvents: "all", + }, + "dangerouslySetInnerHTML": { + __html: opts.tooltip, + }, + }, + null + ); + + ReactDOM.render(React.createElement( + TooltipComponent, { + tooltip: tooltipText, + tooltipId: opts.tooltipId, + } + ), domContainerNode); + }, + }; + + } +); + diff --git a/assets/js/src/help-tooltip.jsx b/assets/js/src/help-tooltip.jsx new file mode 100644 index 0000000000..dcf553732d --- /dev/null +++ b/assets/js/src/help-tooltip.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import ReactTooltip from 'react-tooltip'; + +function Tooltip(props) { + let tooltipId = props.tooltipId; + // tooltip ID must be unique, defaults to tooltip text + if(!props.tooltipId && typeof props.tooltip === "string") { + tooltipId = props.tooltip; + } + + return ( + + + + + {props.tooltip} + + + ); +} + +Tooltip.propTypes = { + tooltipId: React.PropTypes.string, + tooltip: React.PropTypes.node.isRequired, +}; + +Tooltip.defaultProps = { + tooltipId: undefined, +}; + +module.exports = Tooltip; diff --git a/views/settings/mta.html b/views/settings/mta.html index 7fde74eaa0..831ff0a0e4 100644 --- a/views/settings/mta.html +++ b/views/settings/mta.html @@ -637,6 +637,8 @@ id="mailpoet_mta_test" class="button-secondary" ><%= __('Send a test email') %> + +

@@ -663,6 +665,15 @@