diff --git a/demo/src/app/components/api/api.component.html b/demo/src/app/components/api/api.component.html
index 4b85ce192..5b24f495f 100644
--- a/demo/src/app/components/api/api.component.html
+++ b/demo/src/app/components/api/api.component.html
@@ -11,8 +11,8 @@ <h4 class="ui header">
                     <div class="content">
                         <div class="header">
                             <code>{{ property.name }}</code>&nbsp;
-                            <div class="ui grey medium horizontal label" suiPopup popupText="Data Type">{{ property.type }}</div>
-                            <div class="ui teal medium horizontal label" *ngIf="property.defaultValue" suiPopup popupText="Default Value">{{ property.defaultValue }}</div>
+                            <div class="ui grey medium horizontal label" suiPopup="Data Type">{{ property.type }}</div>
+                            <div class="ui teal medium horizontal label" *ngIf="property.defaultValue" suiPopup="Default Value">{{ property.defaultValue }}</div>
                             <div class="ui red medium horizontal label" *ngIf="property.required">required</div>
                         </div>
                         <div class="description" [innerHTML]="property.description"></div>
@@ -30,7 +30,7 @@ <h4 class="ui header">
                     <div class="content">
                         <div class="header">
                             <code>{{ event.name }}</code>&nbsp;
-                            <div class="ui grey medium horizontal label" suiPopup popupText="Data Type">{{ event.type }}</div>
+                            <div class="ui grey medium horizontal label" suiPopup="Data Type">{{ event.type }}</div>
                         </div>
                         <div class="description" [innerHTML]="event.description"></div>
                     </div>
diff --git a/demo/src/app/components/example/example.component.html b/demo/src/app/components/example/example.component.html
index a1152d3f2..2e69586cb 100644
--- a/demo/src/app/components/example/example.component.html
+++ b/demo/src/app/components/example/example.component.html
@@ -1,7 +1,7 @@
 <div class="example">
     <div class="info">
         <ng-content select="[info]"></ng-content>
-        <i class="icon code" (click)="detail = !detail" suiPopup popupText="View Source" popupInverted></i>
+        <i class="icon code" (click)="detail = !detail" suiPopup="View Source" popupInverted></i>
     </div>
     <div class="html ui top attached segment">
         <ng-content select="[result]"></ng-content>
diff --git a/demo/src/app/pages/modules/popup/popup.page.ts b/demo/src/app/pages/modules/popup/popup.page.ts
index 509d0732e..293f19d55 100644
--- a/demo/src/app/pages/modules/popup/popup.page.ts
+++ b/demo/src/app/pages/modules/popup/popup.page.ts
@@ -3,7 +3,7 @@ import { ApiDefinition } from "../../../components/api/api.component";
 import { SuiPopupConfig } from "ng2-semantic-ui";
 
 const exampleStandardTemplate = `
-<button class="ui green icon button" suiPopup popupHeader="Example" popupText="This is an example popup">
+<button class="ui green icon button" suiPopup="This is an example popup" popupHeader="Example">
     <i class="add icon"></i>
 </button>
 `;
@@ -21,7 +21,7 @@ const exampleTemplateTemplate = `
 `;
 
 const examplePlacementTemplate = `
-<div class="ui card" suiPopup popupText="You can customise my placement!" popupInverted [popupPlacement]="position">
+<div class="ui card" suiPopup="You can customise my placement!" popupInverted [popupPlacement]="position">
     <div class="content">
         <div class="header">Positioning</div>
         <div class="description">
@@ -41,7 +41,7 @@ export class PopupPage {
             selector: "[suiPopup]",
             properties: [
                 {
-                    name: "popupText",
+                    name: "suiPopup",
                     type: "string",
                     description: "Sets the text within the popup."
                 },
@@ -130,7 +130,7 @@ export class PopupPage {
     public position:string = "bottom right";
 
     public manualPopupMarkup:string = `
-<div class="ui segment" suiPopup popupText="Manual" popupTrigger="manual" #popup="suiPopup">
+<div class="ui segment" suiPopup="Manual" popupTrigger="manual" #popup="suiPopup">
     <button class="ui button" (click)="popup.open()">Open!</button>
     <button class="ui button" (click)="openPopup(popup)">Conditionally Open!</button>
     <button class="ui button" (click)="popup.toggle()">Toggle!</button>
diff --git a/src/modules/popup/directives/popup.directive.ts b/src/modules/popup/directives/popup.directive.ts
index f89e76793..427957a60 100644
--- a/src/modules/popup/directives/popup.directive.ts
+++ b/src/modules/popup/directives/popup.directive.ts
@@ -20,7 +20,7 @@ export class SuiPopupDirective extends SuiPopupController {
         this.popup.config.header = header;
     }
 
-    @Input()
+    @Input("suiPopup")
     public set popupText(text:string) {
         this.popup.config.text = text;
     }