Changing Tooltip Placement with CSS - html

Question

I am trying to change the position of a tooltip on a mobile view to view upwards rather than to the left and right as they are currently on a larger screen. The tooltips currently display to the left for the button on the left and to the right for the button on the right since they have whitespace in those areas but on the mobile views they don't to I would like to change the "data-placement" to "top" using CSS but only when viewing with a mobile phone (less than 400). My current CSS is listed below for the circumstances I have listed.
HTML:
#button-container {
height: 100px;
margin-top: 15%;
#Mission {
width: 45%;
a {
h5 {
font-size: 18px;
}
}
}
#HowItWorks {
width: 45%;
a {
h5 {
font-size: 18px;
}
}
}
}
<div id="button-container" class="container">
<!-- Container -->
<div class="row">
<div class="col-lg-3"></div>
<!-- Spacing -->
<div id="Mission" class="btn col-lg-3" data-toggle="tooltip" data-placement="left" title="
We believe that in order to achieve continuous joy one needs to unselfishly create joy for those around them. The Joy Project assists local members of the community through acts of kindness.">
<!-- Mission button -->
<!-- Tooltip Hover -->
<a href="/mission">
<h5><b>Our Mission</b></h5>
</a>
</div>
<div id="HowItWorks" class="btn col-lg-3" data-toggle="tooltip2" data-placement="right" title="
Friends of the Joy Project “nominate” someone in need and then mobilize to meet this need and spread joy in our communities.">
<!-- How It Works button -->
<!-- Tooltip Hover -->
<a href="/howitworks">
<h5><b>How It Works</b></h5>
</a>
</div>
<div class="col-lg-3"></div>
<!-- Spacing -->
</div>
</div>
<!-- /Container -->

Answer 1

If you only want the placement to be top on certain widths, I'd suggest looking at the #media css rule. Because of the way tooltips directions are declared (in the div) you might have to create two divs and determine which one to show based on the height.
#media only screen and (max-width: 400px) {
.tooltip .leftTooltip {
display: none;
}
.tooltip .topTooltip {
display: visible;
}
}
#media only screen and (min-width: 400px) {
.tooltip .leftTooltip {
display: visible;
}
.tooltip .topTooltip {
display: none;
}
}