How to render a column header with both text and a tooltip icon in Fabric DetailsList
In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).
office-ui-fabric
asked Nov 15 '18 at 14:41
EricEric
475
add a comment |
In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).
office-ui-fabric
asked Nov 15 '18 at 14:41
EricEric
475
add a comment |
In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).
office-ui-fabric
asked Nov 15 '18 at 14:41
EricEric
475
In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).
office-ui-fabric
office-ui-fabric
asked Nov 15 '18 at 14:41
EricEric
475
asked Nov 15 '18 at 14:41
EricEric
475
asked Nov 15 '18 at 14:41
EricEric
475
asked Nov 15 '18 at 14:41
EricEric
475
asked Nov 15 '18 at 14:41
EricEric
475
475
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.
function onRenderDetailsHeader(props, defaultRender?) {
return defaultRender!({
...props,
onRenderColumnHeaderTooltip: (tooltipHostProps) => {
return (
<Fabric.TooltipHost {...tooltipHostProps} />
)
}
})
}
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321904%2fhow-to-render-a-column-header-with-both-text-and-a-tooltip-icon-in-fabric-detail%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.
function onRenderDetailsHeader(props, defaultRender?) {
return defaultRender!({
...props,
onRenderColumnHeaderTooltip: (tooltipHostProps) => {
return (
<Fabric.TooltipHost {...tooltipHostProps} />
)
}
})
}
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
add a comment |
Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.
function onRenderDetailsHeader(props, defaultRender?) {
return defaultRender!({
...props,
onRenderColumnHeaderTooltip: (tooltipHostProps) => {
return (
<Fabric.TooltipHost {...tooltipHostProps} />
)
}
})
}
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
add a comment |
Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.
function onRenderDetailsHeader(props, defaultRender?) {
return defaultRender!({
...props,
onRenderColumnHeaderTooltip: (tooltipHostProps) => {
return (
<Fabric.TooltipHost {...tooltipHostProps} />
)
}
})
}
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
Here is a Codepen I put together real quick. The only issue is that I couldn't get the info icon rendered as a target for the tooltip. Maybe this will give you a good start.
function onRenderDetailsHeader(props, defaultRender?) {
return defaultRender!({
...props,
onRenderColumnHeaderTooltip: (tooltipHostProps) => {
return (
<Fabric.TooltipHost {...tooltipHostProps} />
)
}
})
}
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
answered Nov 15 '18 at 21:31
Vitalie BragaVitalie Braga
1462
1462
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
add a comment |
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
Awesome! Thank you!
– Eric
Nov 19 '18 at 13:53
1
1
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
By the way, this doesn't work with versions under 6.102: github.com/OfficeDev/office-ui-fabric-react/releases/tag/…
– Eric
Nov 19 '18 at 15:20
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
Good to know. Looked over the PR introducing this feature and it seems that this is an opt-in behavior as it's not wanted by default.
– Vitalie Braga
Nov 21 '18 at 1:47
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321904%2fhow-to-render-a-column-header-with-both-text-and-a-tooltip-icon-in-fabric-detail%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
