Question

我在这里有一个JSFiddle：

此刻，这两个工具提示都包含在内。

我可以通过以下两种方式来包装这两个工具提示：

How do you change the width and height of Twitter Bootstrap's tooltips?

#!/bin/bash

HIT_DATE=$1

# format YYYY-MM-DD

YYYY=${HIT_DATE:0:4}
MM=${HIT_DATE:5:2}
DD=${HIT_DATE:8:2}

previousday=-1
while [ true ] ;
do
    count=`aws s3 ls s3://dp-insights-data${ENV_PATH}/id-mapping/year=$YYYY/month=$MM/date=$DD/ | wc -l`
    if [ $count -gt 1 ]
    then
        echo "The mapping file is found for date: $YYYY $MM $DD"
        break;
    else
        previousday=$(($previousday + -1))
        TEMP_DATE=`date --date="$previousday day" +%Y-%m-%d`
        echo "The next date is: $TEMP_DATE"
        YYYY=${TEMP_DATE:0:4}
        MM=${TEMP_DATE:5:2}
        DD=${TEMP_DATE:8:2} 
    fi
done

但这会导致两个工具提示都无法包装。

如何获得第一个不包装的工具提示？

Answer 1

我会在选项中使用模板，以将具有不同类的不同html内容应用于wrap和nowrap，如下所示：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})
})

$(function () {
    $('[data-toggle="tooltip-nowrap"]').tooltip({template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner nowrap"></div></div>'})
})

http://jsfiddle.net/9k3Lbtr6/1/

Answer 2

Bootstrap允许您利用html:选项以丰富的HTML内容呈现工具提示。这样，您可以将普通的空白字符替换为不间断的空白字符，以强制不包装内容。

您可以利用jQuery的$.each()函数和简单的正则表达式.replace()来自动执行此过程。在按钮上添加类，以确定何时应用强制一行。您必须将窗口缩小（水平）才能看到效果。

http://jsfiddle.net/dixalex/vqgj8brs/1/

.tooltip-inner {
  max-width: 500px !important;
}

<div class="container-fluid">
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
  <div class="col-lg-10 col-md-10 ">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default one-line" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD NOT wrap" data-container="body">Tooltip No Wrap</button>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
      <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="This is a longer tooltip which SHOULD wrap" data-container="body">Tooltip top 2</button>
    </div>
  </div>
  <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
</div>

$('[data-toggle="tooltip"]').each(function(index, element) {
  var title_text = $(element).data('original-title');
  var convert_white_space = title_text.replace(/ /g, '&#160;');

  if ($(element).hasClass('one-line')) {
    $(element).attr('data-original-title', convert_white_space);
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
    console.log(convert_white_space);
  } else {
    $(element).tooltip({
      html: true,
      placement: "bottom"
    });
  }
});

在Bootstrap中，如何获取不包装的单个工具提示

2 个答案: