---
title: Change Survey HTML with JavaScript
product: Form Library
description: SurveyJS Form Library allows you to modify HTML markup of individual survey elements to extend their default functionality and have greater flexibility and control over their layout and positioning. This free demo for JavaScript shows how to add tooltips to question titles. Hover over a question title to see the infotip appear.
framework: React
source: https://surveyjs.io/form-library/examples/change-survey-html-with-javascript/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Change Survey HTML with JavaScript (React)

SurveyJS Form Library offers multiple customization options for survey elements (panels and questions):

- Configure templates for answer options in single- and multi-select questions ([View Demo](https://surveyjs.io/form-library/examples/add-custom-items-to-single-and-multi-select-questions/))
- Implement custom question renderers based on built-in question types ([View Demo](https://surveyjs.io/form-library/examples/create-custom-question-renderer/))
- Create custom question types ([View Demo](https://surveyjs.io/form-library/examples/add-custom-question-type-to-form-builder/))

If none of these options meets your requirements, you can handle events to modify HTML markup of individual survey elements. The [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model) class raises the following events for this purpose:

- [`onAfterRenderQuestion`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderQuestion)
- [`onAfterRenderQuestionInput`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderQuestionInput)
- [`onAfterRenderMatrixCell`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderMatrixCell)
- [`onAfterRenderPanel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderPanel)
- [`onAfterRenderPage`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderPage)
- [`onAfterRenderSurvey`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderSurvey)

Each of these events accepts the `options.htmlElement` parameter, which contains an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank"><code>HTMLElement</code></a> object. You can use its properties and methods to change HTML markup in your JavaScript code. For example, this demo shows how to add tooltips to question titles. Tooltip texts are specified in a question's [`title`](https://surveyjs.io/form-library/documentation/api-reference/text-entry-question-model#title) property and are separated from the title text by a special character combination (`"||"`). The `onAfterRenderQuestion` event handler splits the `title` property value and assigns title text to `HTMLElement`'s <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText" target="_blank"><code>innerText</code></a> property and the tooltip text to `HTMLElement`'s <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/title" target="_blank"><code>title</code></a> property. Hover the mouse pointer over a question title to see its tooltip.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

const titleDivider = "||";
function updateStringComponents(_, options) {
    options.htmlElement.querySelectorAll('.sv-string-viewer').forEach((el) => {
        const text = el.innerText;
        if (text.indexOf(titleDivider) > -1) {
            const strings = text.split(titleDivider);
            el.title = strings[1];
            el.innerText = strings[0];
        }
    });
}
function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    survey.onAfterRenderQuestion.add(updateStringComponents);
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = { 
  "elements": [
    {
      "type": "checkbox",
      "name": "os",
      "title": "What operating system(s) do you use on your work computer(s)?||Please select all that apply.",
      "description": "Hover the mouse pointer over the title above to see a tooltip.",
      "showOtherItem": true,
      "otherText": "Other (specify)",
      "choices": [ "Windows", "Linux", "Macintosh OSX" ]
    }, 
    {
      "type": "checkbox",
      "name": "languages",
      "title": "What programming language(s) do you use at work?||Please select all that apply but no more than three languages.",
      "description": "Hover the mouse pointer over the title above to see a tooltip.",
      "colCount": 4,
      "showOtherItem": true,
      "otherText": "Other (specify)",
      "choices": [
        "JavaScript", "Java", "Python", "CSS",
        "PHP", "Ruby", "C++", "C",
        "Shell", "C#", "Objective-C", "R",
        "VimL", "Go", "Perl", "CoffeeScript",
        "TeX", "Swift", "Scala", "Emacs Lisp",
        "Haskell", "Lua", "Clojure", "MATLAB",
        "Arduino", "Makefile", "Groovy", "Puppet",
        "Rust", "PowerShell"
      ],
      "maxSelectedChoices": 3
    }
  ]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/change-survey-html-with-javascript/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/change-survey-html-with-javascript/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/change-survey-html-with-javascript/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/change-survey-html-with-javascript/vanillajs.md)