Commit 7cdab4da authored by Dimitrie Hoekstra's avatar Dimitrie Hoekstra Committed by Dennis Tang

Changed default tooltip position to be top, instead of bottom

- Tooltips, by default, will display at the top of the element, instead
of at the bottom
- Note actions and emoji awards tooltips are now top-positioned
parent 7c54409f
...@@ -437,7 +437,7 @@ export class AwardsHandler { ...@@ -437,7 +437,7 @@ export class AwardsHandler {
createAwardButtonForVotesBlock(votesBlock, emojiName) { createAwardButtonForVotesBlock(votesBlock, emojiName) {
const buttonHtml = ` const buttonHtml = `
<button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom"> <button class="btn award-control js-emoji-btn has-tooltip active" title="You">
${this.emoji.glEmojiTag(emojiName)} ${this.emoji.glEmojiTag(emojiName)}
<span class="award-control-text js-counter">1</span> <span class="award-control-text js-counter">1</span>
</button> </button>
......
...@@ -124,9 +124,6 @@ function deferredInitialisation() { ...@@ -124,9 +124,6 @@ function deferredInitialisation() {
selector: '.has-tooltip, [data-toggle="tooltip"]', selector: '.has-tooltip, [data-toggle="tooltip"]',
trigger: 'hover', trigger: 'hover',
boundary: 'viewport', boundary: 'viewport',
placement(tip, el) {
return $(el).data('placement') || 'bottom';
},
}); });
// Initialize popovers // Initialize popovers
......
...@@ -151,10 +151,9 @@ export default { ...@@ -151,10 +151,9 @@ export default {
</div> </div>
<div v-if="canAwardEmoji" class="note-actions-item"> <div v-if="canAwardEmoji" class="note-actions-item">
<a <a
v-gl-tooltip.bottom v-gl-tooltip
:class="{ 'js-user-authored': isAuthoredByCurrentUser }" :class="{ 'js-user-authored': isAuthoredByCurrentUser }"
class="note-action-button note-emoji-button js-add-award js-note-emoji" class="note-action-button note-emoji-button js-add-award js-note-emoji"
data-position="right"
href="#" href="#"
title="Add reaction" title="Add reaction"
> >
...@@ -175,7 +174,7 @@ export default { ...@@ -175,7 +174,7 @@ export default {
/> />
<div v-if="canEdit" class="note-actions-item"> <div v-if="canEdit" class="note-actions-item">
<button <button
v-gl-tooltip.bottom v-gl-tooltip
type="button" type="button"
title="Edit comment" title="Edit comment"
class="note-action-button js-note-edit btn btn-transparent" class="note-action-button js-note-edit btn btn-transparent"
...@@ -186,7 +185,7 @@ export default { ...@@ -186,7 +185,7 @@ export default {
</div> </div>
<div v-if="showDeleteAction" class="note-actions-item"> <div v-if="showDeleteAction" class="note-actions-item">
<button <button
v-gl-tooltip.bottom v-gl-tooltip
type="button" type="button"
title="Delete comment" title="Delete comment"
class="note-action-button js-note-delete btn btn-transparent" class="note-action-button js-note-delete btn btn-transparent"
...@@ -197,7 +196,7 @@ export default { ...@@ -197,7 +196,7 @@ export default {
</div> </div>
<div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item"> <div v-else-if="shouldShowActionsDropdown" class="dropdown more-actions note-actions-item">
<button <button
v-gl-tooltip.bottom v-gl-tooltip
type="button" type="button"
title="More actions" title="More actions"
class="note-action-button more-actions-toggle btn btn-transparent" class="note-action-button more-actions-toggle btn btn-transparent"
......
...@@ -171,7 +171,6 @@ export default { ...@@ -171,7 +171,6 @@ export default {
:class="getAwardClassBindings(awardList)" :class="getAwardClassBindings(awardList)"
:title="awardTitle(awardList)" :title="awardTitle(awardList)"
data-boundary="viewport" data-boundary="viewport"
data-placement="bottom"
class="btn award-control" class="btn award-control"
type="button" type="button"
@click="handleAward(awardName)" @click="handleAward(awardName)"
...@@ -187,7 +186,6 @@ export default { ...@@ -187,7 +186,6 @@ export default {
title="Add reaction" title="Add reaction"
aria-label="Add reaction" aria-label="Add reaction"
data-boundary="viewport" data-boundary="viewport"
data-placement="bottom"
type="button" type="button"
> >
<span class="award-control-icon award-control-icon-neutral"> <span class="award-control-icon award-control-icon-neutral">
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
- awards_sort(grouped_emojis).each do |emoji, awards| - awards_sort(grouped_emojis).each do |emoji, awards|
%button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
class: [(award_state_class(awardable, awards, current_user))], class: [(award_state_class(awardable, awards, current_user))],
data: { placement: "bottom", title: award_user_list(awards, current_user) } } data: { title: award_user_list(awards, current_user) } }
= emoji_icon(emoji) = emoji_icon(emoji)
%span.award-control-text.js-counter %span.award-control-text.js-counter
= awards.count = awards.count
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
.award-menu-holder.js-award-holder .award-menu-holder.js-award-holder
%button.btn.award-control.has-tooltip.js-add-award{ type: 'button', %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
'aria-label': _('Add reaction'), 'aria-label': _('Add reaction'),
data: { title: _('Add reaction'), placement: "bottom" } } data: { title: _('Add reaction') } }
%span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face') %span{ class: "award-control-icon award-control-icon-neutral" }= custom_icon('emoji_slightly_smiling_face')
%span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley') %span{ class: "award-control-icon award-control-icon-positive" }= custom_icon('emoji_smiley')
%span{ class: "award-control-icon award-control-icon-super-positive" }= custom_icon('emoji_smile') %span{ class: "award-control-icon award-control-icon-super-positive" }= custom_icon('emoji_smile')
......
---
title: Change spawning of tooltips to be top by default
merge_request: 21223
author:
type: changed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment