Question

我使用了here找到的工具提示样式。我没有修改它。我使用bootstrap作为我的一般造型。

但这是我申请时的样子：

这很奇怪，因为我之前在另一个工作得很好的网站上使用过这种风格。我复制并粘贴了找到的样式并在我的html中应用了这个类：

<div class="input-group" style="padding-bottom: 10px;">
    <span class="input-group-addon">Status</span>
    <!-- TODO: Make this automatically rather than hardcode -->
    <select class="form-control" id="new-activity-modal-status-dropdown">
        <option value="NA">N/A</option>
        <option value="ON_TRACK">On Track</option>
        <option value="DONE">Done</option>
        <option value="ISSUE">Issue</option>
        <option value="BEHIND">Behind</option>
        <option value="ABANDONED">Abandoned</option>
    </select>
    <span class="input-group-addon tooltip-top" 
          data-tooltip="The Status of the Activity. Usually On Track but otherwise set to N/A if unsure.">
        <b>?</b>
    </span>
</div>

我在标题中包含的内容：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="css/ionicons.css">
<link rel="stylesheet" href="css/CustomStyling.css">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/content-controller.js"></script>

I made a Fiddle

以下是整个模态html：

<div id="new-activity-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Add New Activity</h1>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="progress" id="new-activity-progressbar">
                            <div class="progress-bar progress-bar-warning"
                                 role="progressbar"
                                 aria-valuenow="60"
                                 aria-valuemin="0"
                                 aria-valuemax="100" style="width: 0%">
                                <span><b>60% Complete</b></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <div class="input-group" style="padding-bottom: 10px;">
                                <span class="input-group-addon">Status</span>
                                <!-- TODO: Make this automatically rather than hardcode -->
                                <select class="form-control" id="new-activity-modal-status-dropdown">
                                    <option value="NA">N/A</option>
                                    <option value="ON_TRACK">On Track</option>
                                    <option value="DONE">Done</option>
                                    <option value="ISSUE">Issue</option>
                                    <option value="BEHIND">Behind</option>
                                    <option value="ABANDONED">Abandoned</option>
                                </select>
                                <span class="input-group-addon tooltip-top" 
                                      data-tooltip="The Status of the Activity. Usually On Track but otherwise set to N/A if unsure.">
                                    <b>?</b>
                                </span>
                            </div>
                            <div class="input-group" style="padding-bottom: 10px;">
                                <span class="input-group-addon">Activity Name</span>
                                <input type="text" class="form-control" id="new-activity-modal-name-field"
                                       aria-describedby="new-activity-modal-name-field">
                                <span class="input-group-addon tooltip-top" 
                                      data-tooltip="The Name of the Activity. This name appears in the Activity Overview.">
                                    <b>?</b>
                                </span>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">Department</span>
                                <select class="form-control" id="new-activity-modal-department-dropdown">
                                    <option value="culture">Culture</option>
                                    <option value="commercial">Commercial</option>
                                    <option value="economy">Economy</option>
                                    <option value="technical-department">Technical Department</option>
                                    <option value="it">IT</option>
                                    <option value="flight-department">Flight Department</option>
                                    <option value="legal">Legal</option>
                                    <option value="ground-operation">Ground Operation</option>
                                    <option value="bdo">BDO</option>
                                    <option value="administration">Administration</option>
                                    <option value="training">Training</option>
                                    <option value="passenger-service">Passenger Service</option>
                                    <option value="cabin">Cabin</option>
                                </select>
                                <span class="input-group-addon tooltip-top" 
                                      data-tooltip="The department this activity belongs to.">
                                    <b>?</b>
                                </span>
                            </div>
                        </div>
                        <div class="input-group date" id="new-activity-modal-datetimepicker-start" style="padding-bottom: 10px;">
                            <span class="input-group-addon">Start Time</span>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            <span class="input-group-addon tooltip-top" 
                                  data-tooltip="The start of the activity. Usually today's date.">
                                <b>?</b>
                            </span>
                        </div>
                        <div class="input-group date" id="new-activity-modal-datetimepicker-end">
                            <span class="input-group-addon">End Time</span>
                            <input type='text' class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            <span class="input-group-addon tooltip-top" 
                                  data-tooltip="The estimated end of the activity.">
                                <b>?</b>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Answer 1

将宽度更改为最小宽度，然后工具提示将自动展开

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  min-width: 160px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
}

/* Directions */

工具提示造型中断

1 个答案: