Ok so the current tooltip for the Home Button is generated using the HTML title attribute Basically when you add the title attribute to an HTML tag the browser will display a tooltip. The style is browser dependent and I don't know of a way to modify the style. One approach might be to remove the title attribute then add a new one - maybe data-title and then use the mechanism you are using to generate the other tooltips to generate that one. Here's a sample that show hiding the existing tooltip and creating a new one using css.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Home Extent</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
[data-title]:hover:after {
content: attr(data-title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
</style>
<script src="//js.arcgis.com/3.8/"></script>
<script>
require([
"esri/map",
"esri/dijit/HomeButton",
"dojo/i18n!esri/nls/jsapi",
"dojo/query",
"dojo/dom-attr",
"dojo/domReady!"
], function(
Map, HomeButton,esriBundle, query, domAttr
) {
var map = new Map("map", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
query(".home").forEach(function(node){
//remove the title attribute
//Get the title attribute
if(domAttr.get(node, "title") === esriBundle.widgets.homeButton.home.title){
//replace the title attribute with data-title
domAttr.remove(node, "title");
domAttr.set(node, "data-title", esriBundle.widgets.homeButton.home.title )
}
});
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="HomeButton"></div>
</div>
</body>
</html>
