ProblemSets: Place set description in info button.#2925
ProblemSets: Place set description in info button.#2925somiaj wants to merge 1 commit intoopenwebwork:developfrom
Conversation
| =%> | ||
| % if ($set->description =~ /\S/) { | ||
| <a class="help-popup" role="button" tabindex="0" data-bs-placement="right" | ||
| data-bs-toggle="popover" data-bs-content="<%= $set->description =%>"> |
There was a problem hiding this comment.
This should be
| data-bs-toggle="popover" data-bs-content="<%= $set->description =%>"> | |
| data-bs-toggle="popover" data-bs-title="<%= $set->description =%>"> |
Bootstrap uses the data-bs-title attribute for tooltip contents. You can also directly set the title attribute and that will be used the same. Apparently they also honor data-bs-content although it is not documented and seems to result in a lot of extra padding on the tooltip which does not look good to me.
There was a problem hiding this comment.
Thanks. I too noticed the extra padding and wasn't sure how to deal with it.
I took this code from help-popup use elsewhere in the code. Should I update those to use data-bs-title too?
There was a problem hiding this comment.
Actually I don't like data-bs-title, it puts the content in the title of a card, which looks off to me, is bold and has a grey background, with only rounded corners at the top.
https://getbootstrap.com/docs/5.3/components/popovers/
Looks like popovers actually do use cards, and title and content are both described there. Though removing the padding would be nice.
There was a problem hiding this comment.
Ahh, I didn't look closely. You switched from a tooltip to a popover. That uses both data-bs-content and data-bs-title. The difference is that the title is the header in the popover, and the content is the body of the popoever. I am not sure that I like switching to a popover for this.
There was a problem hiding this comment.
No, don't switch the other popovers to use the title.
There was a problem hiding this comment.
I didn't see that you omitted the bs in the attribute. Okay, then that won't conflict.
There was a problem hiding this comment.
I think that probably the a tag is better here. I am not certain though.
There was a problem hiding this comment.
I don't like left because that places the tooltip over the set id. I don't see a problem with it being above or below but against the right side of the screen.
There was a problem hiding this comment.
I don't have strong feelings to argue that left remain, I think it looks better, but that does mean it would have to be toggled again on mobile devices. I still like the look better, but not enough to keep it around, maybe @dlglin can chime in on that.
There was a problem hiding this comment.
I removed left unless others suggest I add it back.
somiaj
force-pushed
the
description-info-icon
branch
from
7bafcbf to
8b3e064
Compare
Move the set description from a tooltip on the link to the set to a tooltip on an info button located just right of the set link if the set description is not empty. This adds an additional option to the `set-id-tooltip` class JavaScript that if `data-fallback-placements` is set as a spaced separated list list, that list will be passed to the bootstrap Tooltip on creation.
somiaj
force-pushed
the
description-info-icon
branch
from
8b3e064 to
dd9a991
Compare
2 participants
Move the set description from a tooltip on the link to the set to a tooltip on an info button located just right of the set link if the set description is not empty.
This adds an additional option to the
set-id-tooltipclass JavaScript that ifdata-fallback-placementsis set as a spaced separated list, that list will be passed to the bootstrap Tooltip on creation.This was suggested by @dlglin.