html element as react-bootstrap button title, using ES6 syntax? - html

Question

I am implementing a button using React Bootstrap and ES6 syntax, but I'd like to have the title be responsive to media queries... if the window is too small, then the word 'amazing' should be hidden from the button title "Use this amazing Product". I'm fine with writing the CSS side (.optionalSubstring {display: none;}), but how can I get the title attribute of the button to receive an html element rather than a string?
The following (i.e., simply wrapping the desired title in single quotes) does NOT work, as it renders the dropdown button literally with the title "Use this <span className="optionalSubstring">amazing </span>Product"
And sorry, but it has to be a CSS solution, not a JS one.
import {default as React, Component} from 'react';
import {Button, DropdownButton, MenuItem} from 'react-bootstrap';
export default class MyDropdown extends Component {
onSelectOpen = (eventKey) => {
//do something
};
render() {
let myTitle = 'Use this <span className="optionalSubstring">amazing </span>Product';
return (
<div className="menuWrapper">
<DropdownButton bsSize="small" dropup bsStyle="default4" title={myTitle} id="ShowInProductMenu">
<MenuItem eventKey="foo1" onSelect={this.onSelectOpen}>Foo One</MenuItem>
<MenuItem eventKey="foo2" onSelect={this.onSelectOpen}>Foo Two</MenuItem>
<MenuItem eventkey="foo3" onSelect={this.onSelectOpen}>Foo Three</MenuItem>
</DropdownButton>
</div>
);
}
}

Answer 1

They're not doing anything fancy with {title} in the component as you can see from the source https://github.com/react-bootstrap/react-bootstrap/blob/master/src/DropdownButton.js#L25
Meaning you can pass in a jsx element instead of a string.
let myTitle =
<span>
Use this <span className="optionalSubstring">amazing </span>Product
</span>