Redirect Notice

Redirect Notice

The page you requested has been relocated to Player Docs.

Using React Hints

React plugin displays informative text about specific player buttons when hovering over them. This feature can be toggle enabled or disabled through player configuration if preferred.

var config = {
  var config = {
    plugins: {
      react: {
        resources: [
          {src: "#{paths.plugins}react/libs/react.min.js", debug: "#{paths.plugins}react/libs/react.js", type: "text/javascript"},
          {src: "#{paths.plugins}react/React.min.css", debug: "#{paths.plugins}react/React.css", type: "text/css"},
          {src: "#{paths.plugins}react/React.js", debug: "#{paths.plugins}react/React.js", type: "text/javascript"}
        ],
        hint: {
          enabled: true,
          mode: "fixed"
        }
      }
    }
  }
};
akamai.amp.AMP.create("amp", config);

if adding components to react UI i.e buttons, the property data-rh can be used to indicate the tooltip message for the element to be shown.

akamai.amp.AMP.create("amp", config).then(function (player) {
  var amp = player;
  var component = React.createElement("button", {
    className: "amp-icon amp-fullscreen",
    id: "component",
    'data-rh':'Hint',
    key: "fs",
    onClick: function () {
      console.log("Custom Control");
    }
  });
  amp.react.controls.addComponent(component);
  // amp.react.controls.removeComponent(component);

  var element = document.createElement("div");
  amp.react.container.appendChild(element);
  // amp.react.container.removeChild(element);
});