test/html/tooltip.html

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

    <title>Materialize - Documentation</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" href="../../docs/images/favicon/apple-touch-icon-152x152.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <link rel="icon" href="../../docs/images/favicon/favicon-32x32.png" sizes="32x32">

    <!-- Android 5 Chrome Color -->
    <meta name="theme-color" content="#EE6E73">

    <link href="../../dist/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="../../docs/css/prism.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <a class="btn tooltipped" data-position="bottom">unsafeHTML</a>
        <a class="btn tooltipped" data-position="bottom">html</a>
        <a class="btn tooltipped" data-position="bottom">text</a>
        <a class="btn tooltipped" data-position="bottom" data-tooltip="<span class='color: red'>I am a tooltip</span>">data-tooltip</a>
    </div>

    <!-- Scripts -->
    <script src="../../bin/materialize.js"></script>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.tooltipped');
            var instances = M.Tooltip.init(elems[0], {unsafeHTML: "<span class='color: red'>I am a tooltip</span>"});
            var instances = M.Tooltip.init(elems[1], {html: "<span class='color: red'>I am a tooltip</span>"});
            var instances = M.Tooltip.init(elems[2], {text: "<span class='color: red'>I am a tooltip</span>"});
            var instances = M.Tooltip.init(elems[3]);
        });
    </script>

</body>
</html>